Skeleton
Skeleton components provide visual placeholders for text, avatars, and blocks to reduce perceived loading time.
Source
LLM docs
Package
Examples
3
Properties
35
Playground
Basics
Stack text, avatar, and block placeholders to preview the structure of incoming content while data loads.
Loading demo…
import { Block, Row, Skeleton } from '@plocks/ui';
export function Demo() {
return (
<Block>
<Skeleton shape="text" w="60%" />
<Skeleton shape="text" w="80%" />
<Skeleton shape="text" w="40%" />
<Row gap="md" align="center">
<Skeleton shape="avatar" size="lg" />
<Block grow={1}>
<Skeleton shape="text" w="40%" />
<Skeleton shape="text" w="60%" />
</Block>
</Row>
<Skeleton shape="rectangle" h={120} />
<Skeleton shape="button" w={120} />
</Block>
);
}Shapes
Preview the available skeleton shapes for avatars, typography lines, actions, and media blocks.
Loading demo…
import { Block, Row, Skeleton } from '@plocks/ui';
export function Demo() {
return (
<Block>
<Row gap="lg" align="center" wrap="wrap">
<Skeleton shape="avatar" size="sm" />
<Skeleton shape="avatar" size="md" />
<Skeleton shape="avatar" size="lg" />
<Skeleton shape="avatar" size="xl" />
</Row>
<Block>
<Skeleton shape="text" w="100%" />
<Skeleton shape="text" w="90%" />
<Skeleton shape="text" w="70%" />
</Block>
<Row gap="md" wrap="wrap">
<Skeleton shape="button" w={80} />
<Skeleton shape="button" w={100} />
<Skeleton shape="button" w={120} />
</Row>
<Row gap="sm" wrap="wrap">
<Skeleton shape="chip" />
<Skeleton shape="chip" />
<Skeleton shape="chip" />
</Row>
<Skeleton shape="rectangle" h={60} />
<Skeleton shape="card" h={200} />
</Block>
);
}Card Layout
Combine avatar, text, and action placeholders to preview a rich card layout ahead of remote content.
Loading demo…
import { Block, Row, Skeleton, useTheme } from '@plocks/ui';
export function Demo() {
const theme = useTheme();
return (
<Block
p="lg"
radius="lg"
borderWidth={1}
borderColor={theme.backgrounds.border}
bg={theme.backgrounds.surface}
>
<Block>
<Row gap="md" align="center">
<Skeleton shape="avatar" size="lg" />
<Block grow={1}>
<Skeleton shape="text" w="32%" />
<Skeleton shape="text" w="48%" />
</Block>
</Row>
<Skeleton shape="rectangle" h={120} />
<Block>
<Skeleton shape="text" w="100%" />
<Skeleton shape="text" w="78%" />
</Block>
<Row gap="sm" wrap="wrap">
<Skeleton shape="chip" />
<Skeleton shape="chip" />
<Skeleton shape="chip" />
</Row>
</Block>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources