Skeleton
Holds the place of content that's still loading.
<div> <Skeleton sx={styles.avatar} /> <Skeleton sx={styles.line} /></div>Installation
$ npx shadcn@latest add @constella/skeletonUsage
import { Skeleton } from "@/components/primitives/skeleton";Give it the size and shape of what it stands in for with sx.
<Skeleton sx={styles.line} />Card
Fill a Card with skeletons in the shape of its content.
<Card> <CardHeader> <Skeleton sx={styles.title} /> </CardHeader> <CardContent> <Skeleton sx={styles.image} /> </CardContent></Card>Item
Keep the real layout and swap only what's loading, so nothing moves when the content arrives.
<Item> <ItemMedia> {loading ? <Skeleton sx={styles.avatar} /> : <Avatar>…</Avatar>} </ItemMedia> <ItemContent> {loading ? <Skeleton sx={styles.title} /> : <ItemTitle>{name}</ItemTitle>} </ItemContent></Item>API Reference
Skeleton renders a div hidden from screen readers, and takes sx, applied last.