2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:T7de,"use client"; import { MotionConfig, motion } from "motion/react"; import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; export interface SkeletonProps extends Omit, "children"> { /** shimmer: a soft light sweeps across (default) · pulse: fades in and out · none: still. */ animation?: "shimmer" | "pulse" | "none"; } const BASE = "rounded-lg bg-neutral-950/[0.06] dark:bg-white/[0.07]"; export function Skeleton({ animation = "shimmer", className, ...props }: SkeletonProps) { if (animation === "shimmer") { const { style, ...rest } = props; return ( ); } return

; } export interface SkeletonTextProps extends SkeletonProps { lines?: number; } /** Lines of placeholder text; the last one is shorter, like a real paragraph. */ export function SkeletonText({ lines = 3, animation, className, ...props }: SkeletonTextProps) { return (

{Array.from({ length: lines }, (_, i) => ( 1 ? "w-3/5" : "w-full")} /> ))}

); } export default Skeleton; 2e:T515d,

"use client";

import { MotionConfig, motion } from "motion/react";
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";

export interface SkeletonProps extends Omit<ComponentProps<"div">, "children"> {
  /** shimmer: a soft light sweeps across (default) · pulse: fades in and out · none: still. */
  animation?: "shimmer" | "pulse" | "none";
}

const BASE = "rounded-lg bg-neutral-950/[0.06] dark:bg-white/[0.07]";

export function Skeleton({ animation = "shimmer", className, ...props }: SkeletonProps) {
  if (animation === "shimmer") {
    const { style, ...rest } = props;
    return (
      <MotionConfig reducedMotion="user">
        <motion.div
          aria-hidden
          className={cn(
            BASE,
            "bg-[linear-gradient(90deg,transparent_25%,rgb(255_255_255/0.7)_50%,transparent_75%)] bg-[length:200%_100%] bg-no-repeat dark:bg-[linear-gradient(90deg,transparent_25%,rgb(255_255_255/0.06)_50%,transparent_75%)]",
            className,
          )}
          style={style}
          initial={{ backgroundPositionX: "150%" }}
          animate={{ backgroundPositionX: "-50%" }}
          transition={{ duration: 1.6, ease: "linear", repeat: Infinity, repeatDelay: 0.2 }}
          {...(rest as object)}
        />
      </MotionConfig>
    );
  }
  return <div aria-hidden className={cn(BASE, animation === "pulse" && "animate-pulse", className)} {...props} />;
}

export interface SkeletonTextProps extends SkeletonProps {
  lines?: number;
}

/** Lines of placeholder text; the last one is shorter, like a real paragraph. */
export function SkeletonText({ lines = 3, animation, className, ...props }: SkeletonTextProps) {
  return (
    <div aria-hidden className={cn("w-full space-y-2.5", className)} {...props}>
      {Array.from({ length: lines }, (_, i) => (
        <Skeleton key={i} animation={animation} className={cn("h-3 rounded-full", i === lines - 1 && lines > 1 ? "w-3/5" : "w-full")} />
      ))}
    </div>
  );
}

export default Skeleton;

2f:T1ef9,

import { Skeleton, SkeletonText } from "@/components/scalar-ui/skeleton";

export default function Demo() {
  return (
    <div className="w-full max-w-[360px] space-y-3">
      {[0, 1].map((i) => (
        <div key={i} className="rounded-[22px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08] p-5">
          <div className="flex items-center gap-3">
            <Skeleton className="size-10 rounded-full" />
            <div className="flex-1 space-y-2">
              <Skeleton className="h-3 w-32 rounded-full" />
              <Skeleton className="h-3 w-20 rounded-full" />
            </div>
          </div>
          <SkeletonText lines={2} className="mt-5" />
        </div>
      ))}
    </div>
  );
}

30:Tc86,

import { Skeleton, SkeletonText } from "@/components/scalar-ui/skeleton";

export default function Example() {
  return (
    <div className="w-full max-w-[380px]">
      <Skeleton className="mb-4 h-5 w-48 rounded-full" />
      <SkeletonText lines={4} />
    </div>
  );
}

31:T18d0,

import { Skeleton, SkeletonText } from "@/components/scalar-ui/skeleton";

export default function Example() {
  return (
    <div className="w-full max-w-[300px] overflow-hidden rounded-[22px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <Skeleton className="h-36 rounded-none" />
      <div className="p-5">
        <Skeleton className="h-4 w-40 rounded-full" />
        <SkeletonText lines={2} className="mt-3" />
        <div className="mt-5 flex gap-2">
          <Skeleton className="h-9 w-24 rounded-xl" />
          <Skeleton className="h-9 w-20 rounded-xl" />
        </div>
      </div>
    </div>
  );
}

32:T434,import { Skeleton } from "@/components/scalar-ui/skeleton"; export default function Example() { return (

Name Status Amount

{[0, 1, 2, 3].map((i) => (

))}

); } 33:T24c0,

import { Skeleton } from "@/components/scalar-ui/skeleton";

export default function Example() {
  return (
    <div className="w-full max-w-[520px] divide-y divide-black/[0.06] rounded-[22px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08] dark:divide-white/[0.08]">
      <div className="grid grid-cols-[2fr_1fr_1fr] gap-4 px-5 py-3 text-[12px] font-medium text-neutral-500 dark:text-neutral-400">
        <span>Name</span>
        <span>Status</span>
        <span className="text-right">Amount</span>
      </div>
      {[0, 1, 2, 3].map((i) => (
        <div key={i} className="grid grid-cols-[2fr_1fr_1fr] items-center gap-4 px-5 py-3.5">
          <div className="flex items-center gap-3">
            <Skeleton className="size-7 rounded-full" />
            <Skeleton className="h-3 w-28 rounded-full" />
          </div>
          <Skeleton className="h-5 w-16 rounded-full" />
          <Skeleton className="ml-auto h-3 w-14 rounded-full" />
        </div>
      ))}
    </div>
  );
}

34:T187b,

import { Skeleton } from "@/components/scalar-ui/skeleton";

export default function Example() {
  return (
    <div className="grid w-full max-w-[420px] grid-cols-3 gap-4 text-center text-[12px] text-neutral-500 dark:text-neutral-400">
      {(["shimmer", "pulse", "none"] as const).map((animation) => (
        <div key={animation} className="space-y-2.5">
          <Skeleton animation={animation} className="h-20 rounded-2xl" />
          <p className="capitalize">{animation}</p>
        </div>
      ))}
    </div>
  );
}

35:T9da,"use client"; import { AnimatePresence, motion } from "motion/react"; import { useEffect, useState } from "react"; import { Skeleton, SkeletonText } from "@/components/scalar-ui/skeleton"; export default function Example() { const [loaded, setLoaded] = useState(false); useEffect(() => { if (loaded) return; const t = setTimeout(() => setLoaded(true), 1800); return () => clearTimeout(t); }, [loaded]); return (

{loaded ? (

Jon Park

Platform engineer

Keeps the deploy pipeline fast and the pager quiet.

) : (

)}

); } 36:T5980,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { useEffect, useState } from "react";
import { Skeleton, SkeletonText } from "@/components/scalar-ui/skeleton";

export default function Example() {
  const [loaded, setLoaded] = useState(false);
  useEffect(() => {
    if (loaded) return;
    const t = setTimeout(() => setLoaded(true), 1800);
    return () => clearTimeout(t);
  }, [loaded]);
  return (
    <div className="flex w-full max-w-[340px] flex-col items-center gap-3">
      <div className="grid w-full rounded-[22px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08] p-5 [&>*]:col-start-1 [&>*]:row-start-1">
        <AnimatePresence initial={false}>
          {loaded ? (
            <motion.div key="content" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }}>
              <div className="flex items-center gap-3">
                <span className="flex size-10 items-center justify-center rounded-full bg-sky-100 text-[13px] font-semibold text-sky-800 dark:bg-sky-900 dark:text-sky-100">JP</span>
                <div>
                  <p className="text-[14px] font-semibold text-neutral-950 dark:text-white">Jon Park</p>
                  <p className="text-[12.5px] text-neutral-500 dark:text-neutral-400">Platform engineer</p>
                </div>
              </div>
              <p className="mt-4 text-[13.5px] leading-relaxed text-neutral-600 dark:text-neutral-400">Keeps the deploy pipeline fast and the pager quiet.</p>
            </motion.div>
          ) : (
            <motion.div key="skeleton" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }}>
              <div className="flex items-center gap-3">
                <Skeleton className="size-10 rounded-full" />
                <div className="space-y-2">
                  <Skeleton className="h-3 w-24 rounded-full" />
                  <Skeleton className="h-3 w-32 rounded-full" />
                </div>
              </div>
              <SkeletonText lines={2} className="mt-4" />
            </motion.div>
          )}
        </AnimatePresence>
      </div>
      <button type="button" onClick={() => setLoaded(false)} className="text-[12.5px] font-medium text-neutral-500 underline-offset-4 hover:text-neutral-950 hover:underline dark:hover:text-white">
        Load again
      </button>
    </div>
  );
}

29:["$","section","skeleton",{"id":"skeleton","aria-labelledby":"skeleton-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"skeleton-title","className":"sr-only","children":"Skeleton"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"motion"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"skeleton","gated":{"unlocked":true,"files":[{"name":"skeleton.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"import { Skeleton, SkeletonText } from \"@/components/scalar-ui/skeleton\";\n\nexport default function Demo() {\n return (\n

\n {[0, 1].map((i) => (\n

\n \n

\n \n \n

\n \n

\n ))}\n

\n );\n}\n","html":"$2f"}],"examples":{"text":{"name":"text.tsx","code":"import { Skeleton, SkeletonText } from \"@/components/scalar-ui/skeleton\";\n\nexport default function Example() {\n return (\n

\n \n \n

\n );\n}\n","html":"$30"},"card":{"name":"card.tsx","code":"import { Skeleton, SkeletonText } from \"@/components/scalar-ui/skeleton\";\n\nexport default function Example() {\n return (\n

\n \n

\n \n \n

\n );\n}\n","html":"$31"},"table-rows":{"name":"table-rows.tsx","code":"$32","html":"$33"},"animations":{"name":"animations.tsx","code":"import { Skeleton } from \"@/components/scalar-ui/skeleton\";\n\nexport default function Example() {\n return (\n

\n {([\"shimmer\", \"pulse\", \"none\"] as const).map((animation) => (\n

\n \n

{animation}

\n ))}\n

\n );\n}\n","html":"$34"},"loading":{"name":"loading.tsx","code":"$35","html":"$36"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add skeleton","shadcn":"npx shadcn@latest add https://scalarui.com/r/skeleton.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install motion","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L37","toolbar":"$L38"}]}],["$L39","$L3a","$L3b","$L3c","$L3d"]]}]

Skeletons

Skeletons

Text

Card

Table Rows

Animations

Loading