Shadcn Skeleton
React skeleton for loading placeholders on cards, tables, and forms. Built with TypeScript and Tailwind CSS for Next.js using Base UI — match the loaded layout.
A skeleton is a pulse block that stands in for content that has not arrived. Size it like the real row — a circle for a face, a short bar for a name, a 16/9 box for a card image. Use it when you know the layout; use a Spinner when you do not.
Looking for a neobrutalism version for shadcn?
Same skeleton, thicker borders. The NeoBrutalism skeleton is the kit if you want that look.
Usage
import { Skeleton } from "@/components/ui/skeleton"<Skeleton className="h-[20px] w-[100px] rounded-full" />className is the API. Height, width, and radius should match the thing that replaces it.
Composition
Avatar
A circle and two lines. Same stack as an Avatar plus a name.
Card
Title and subtitle bars, then an aspect-video media slot inside a Card.
Text
Three lines, last one shorter. That last w-3/4 is what a paragraph looks like.
Form
Label, field, label, field, button. Keep the gaps the real Form uses.
Table
Five rows, three columns. Flex widths stand in for the cells a Table will paint.
RTL
Wrap with DirectionProvider and dir="rtl". The circle stays on the start edge.
API
Prop
Type
Skeleton is a div. Every other HTML attribute passes through.
Notes
Size it like the real thing
A 12px bar that becomes a three-line bio still jumps. Copy the width, height, and radius of what will replace it.
Put aria-busy="true" on the region. The skeleton itself has no role.
With other components
Circle for the photo
CardTitle, media, footer
TableRows while it fetches
FormLabels and inputs
Aspect RatioFill the reserved frame
ItemOne list row
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Sidebar
React sidebar for app shells and dashboard navigation. Built with TypeScript and Tailwind CSS for Next.js using Base UI — collapsible rail, mobile sheet, Cmd+B.
Slider
React slider for volume, price filters, and settings. Built with TypeScript and Tailwind CSS for Next.js using Base UI — one thumb or a range, keyboard steps included.