Skeleton

Reserve space while content is still loading.

npx shadcn@latest add @silicon-ui/skeleton
loadingstatus
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/skeleton

Manually

  1. Install the dependencies.

    npm install motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/skeleton/skeleton.tsx
    • components/silicon-ui/skeleton/skeleton.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { Skeleton } from "@/components/silicon-ui/skeleton/skeleton";

API reference

PropTypeDefault
labelstring"Loading content"
linesnumber3
avatarbooleanfalse
classNamestring—
children

Content to reveal once loading finishes. With children, the placeholder crossfades into them.

ReactNode—
loading

Keeps the placeholder visible while true. Only used together with children.

booleantrue

Dependencies

npm
motion
Registry
silicon-motion-tokens