skeleton
Use to show a placeholder while content is loading.
Philosophy
Loading states deserve the same design attention as loaded states. Skeleton placeholders reduce perceived wait time by hinting at the shape of incoming content. We keep this component prop-less intentionally — you control the shape through className and layout, mirroring the actual content it replaces.
For icon-only UIs, keep a compact icon-sized skeleton instead of removing the skeleton entirely, so layout stability is preserved while loading.
Installation
npx @gentleduck/cli add skeleton
npx @gentleduck/cli add skeleton
Usage
import { Skeleton } from "@/components/ui/skeleton"import { Skeleton } from "@/components/ui/skeleton"<Skeleton className="w-[100px] h-[20px] rounded-full" /><Skeleton className="w-[100px] h-[20px] rounded-full" />Examples
Card
API Reference
Skeleton
| Prop | Type | Default | Description |
|---|---|---|---|
dir | 'ltr' | 'rtl' | -- | Text direction override. Resolved via useDirection (dir prop -> DirectionProvider -> 'ltr'). |
className | string | -- | Additional CSS class names to control shape and size |
...props | React.HTMLProps<HTMLDivElement> | -- | Additional props to spread to the content div |
RTL Support
Direction is resolved through the shared primitives direction module. Use a local dir="rtl" override when the component exposes it, or set DirectionProvider at app/root level for global RTL/LTR behavior.