Getting Started
UI Library
- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
Basic Usage
Avatar
Card
Mimicking your UI
Skeletons are always hand-crafted — there is no auto-generation. The principle is to replicate your real layout using the same wrapper structure (grid, flex, gap, padding), then replace each visible element with a <Skeleton> of matching dimensions.
Practical steps:
- Build the skeleton alongside the real component in the same file
- Wrap both in a conditional: show skeleton while data is loading, render real content once it arrives
- Match widths, heights, and border-radius class-by-class — use the same Tailwind size utilities you use in the real UI
For rounded shapes use rounded-full; for square/rectangular areas the default rounded-xl applies, or override with any rounded-* class via className.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Tailwind classes to control size, shape, and rounding |
The component also accepts all standard HTML div attributes.