Shadcn Skeleton Examples: Loading Placeholders That Prevent Layout Shift
A skeleton is a placeholder that mirrors the shape of upcoming content while data loads, replacing blank screens and jumpy spinners with a calm pulsing preview. The shadcn skeleton component is a single Tailwind CSS styled div with an animation, and composing a few of them produces skeleton loading states for cards, tables, and profiles in minutes.
Gathered here are 7 skeleton examples, Skeleton 1 through Skeleton 7, covering text line stacks, avatar with text rows, card previews, table row placeholders, and full section mocks. Every example is TypeScript and matches the dimensions of the real components it stands in for.
Key features
- Single primitive, endless shapes: One animated div plus Tailwind sizing utilities builds circles, bars, and blocks of any proportion.
- Pulse animation included: The default animate-pulse effect communicates activity without stealing attention.
- Theme aware color: The placeholder uses a muted token, so it blends with light and dark themes automatically.
- Zero runtime cost: No JavaScript executes, making skeletons safe in React Server Components and Suspense fallbacks.
- Composable layouts: Skeleton rows assemble into card, list, and table mocks that mirror your real markup.
Best practices
- Match real dimensions: Size each placeholder to the content it replaces, since the whole point is preventing layout shift.
- Sketch, do not replicate: Represent the major shapes like avatar, title, and two text lines rather than every small element.
- Skip skeletons for instant loads: If data usually arrives under about 200 milliseconds, flashing a skeleton feels worse than nothing.
- Limit repeated rows: Five to eight placeholder rows suggest a list convincingly without an endless gray wall.
- Prefer skeletons over spinners for structure: Use a skeleton when the layout is known, and reserve spinners for actions without predictable shape.
Common use cases
Dashboard tiles are the textbook scenario: while a chart query runs, a skeleton block holds its exact footprint so the grid never reflows. Profile headers pair a circular placeholder with two bars to stand in for an avatar and name, and list pages repeat a row skeleton while a table fetches.
In Next.js App Router projects, skeletons are the natural content of loading.tsx files and Suspense fallbacks, streaming instantly while server components fetch. The dashboards in our React template collection use this pattern on every data-heavy route.
Working alongside loading patterns
A skeleton mirrors a card while it loads, and once data arrives the real component swaps in with identical dimensions. For button-level busyness, a spinner inside the control communicates a pending action better than a shape placeholder, so most apps end up using both patterns for different jobs.
Under the hood
There is no primitive library involved. The skeleton is one div with a pulse animation and rounded corners, styled entirely with Tailwind CSS as shown in the shadcn/ui skeleton docs, so these skeleton examples work identically in Radix UI and Base UI based projects. Marking placeholders aria-hidden keeps screen readers focused on a single loading announcement instead of a stack of empty boxes.