Skeleton
shadcn/ui
Loading placeholder. Match the shape and size of real content — same dimensions, same position.
@/components/ui/skeletonShapes
| Shape | Preview | Usage |
|---|---|---|
| Text line | Paragraph lines — vary widths: 100%, 80%, 60% to feel natural | |
| Circle | Avatar, user icon, dot indicator | |
| Square | Thumbnail, icon button placeholder | |
| Pill | Badge, status label | |
| Block | Card content area, image, chart |
Skeleton is a single div — shape is controlled entirely via className (h-*, w-*, rounded-*). No sub-components.
Loading templates
Ticket table rows
Profile card
Chart loading
Bar chart
Area / Line chart
Pie chart
Donut chart
Each mirrors its real ChartCard — same card, header, and h-52plot height — so the swap to the live chart doesn't shift layout.
In context — ticket table loading state
IDDescriptionStatusAssignee
Token
| Property | Value |
|---|---|
| Background | bg-muted — neutral surface, adapts to light and dark |
| Animation | animate-pulse — opacity cycles 1→0.5→1, 2s loop |
| Radius | rounded-md by default — override with rounded-full, rounded-sm, etc. |
| API | Shape, size, and radius are all className — no dedicated props |
On this page