Skeleton
Placeholder shapes for content that is actively loading.
Add it to your project
Eject the complete skeleton group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject skeletonbash
npx toucan eject skeletonapp.tsx
import { Skeleton } from '@/components/toucan/skeleton';Use when
Loading content has a predictable visual structure worth preserving.
Avoid when
The operation needs progress or explanatory status text.
Example
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Skeleton
Skeleton
Props type: SkeletonProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
height | string | number | undefined | No | Height — CSS value or number (auto-converted to px). |
variant | "text" | "circular" | "rectangular" | 'text' | No | Shape variant. |
width | string | number | undefined | No | Width — CSS value or number (auto-converted to px). |
Also accepts the native div attributes that are not replaced by a Toucan prop.
Type exports
SkeletonProps
Accessibility
- Skeletons are decorative; announce loading state on the surrounding region.
Token families
skeleton