Q: How do I build a card skeleton (image + title + description)?

Use the card variant. Render a ` ` with skeleton placeholders matching your real card layout: ` ` for the image, ` ` for the title, two ` ` lines for the description. The widths shouldn't all match — varied widths feel more natural than identical bars.

Q: Where should skeleton screens render in a Suspense / streaming setup?

Wrap async Server Components in ` }>`. The skeleton renders during the initial HTML stream until the async component is ready. For client-fetched data (TanStack Query, SWR), conditionally render `isLoading ? : `. The Suspense pattern is more elegant for server-rendered apps; the conditional pattern is fine for client-only apps.

Question 1

What is a shadcn skeleton?

Accepted Answer

A shadcn skeleton is a loading placeholder that mirrors the shape of incoming content — gray rectangles where text, images, or cards will appear once the data loads. It tells users "content is loading, this is the structure you'll see in a moment". Built as a styled `

` with `animate-pulse` for the shimmer effect (no Radix dependency — skeletons are pure visual).

Question 2

Are these skeleton examples free?

Accepted Answer

Yes, every skeleton example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

Why use skeletons instead of a spinner?

Accepted Answer

Skeletons set EXPECTATIONS — users see a card-shaped placeholder and know what's coming. They reduce perceived loading time because the layout is already painted (no flash of empty → flash of content). Spinners are vague — they say "loading" but not what. For paginated lists, dashboards, and structured content, skeletons feel faster and more professional. For one-off async actions (save button → spinner), spinners are right.

Question 4

When should I use a skeleton versus an Empty state?

Accepted Answer

Skeleton: data is LOADING (will arrive). Empty state: data has loaded and there's NOTHING (won't arrive without action). The wrong pattern erodes trust: showing skeletons forever feels broken; showing "No results" while still fetching feels confusing. Track loading and empty as distinct states in your component logic.

Question 5

How do I build a card skeleton (image + title + description)?

Accepted Answer

Use the card variant. Render a `` with skeleton placeholders matching your real card layout: `` for the image, `` for the title, two `` lines for the description. The widths shouldn't all match — varied widths feel more natural than identical bars.

Question 6

How do I build a table skeleton (rows of cells)?

Accepted Answer

Use the table variant. Render real table chrome (the header row stays as actual `` elements) but replace each `` content with a ``. Render 5-10 skeleton rows — enough to fill the visible area, not so many that the empty animation overwhelms. On data load, replace skeleton rows with real data without a layout shift.

Question 7

How do I avoid layout shift when content loads?

Accepted Answer

Match the skeleton dimensions to the real content's dimensions. If your card has a 16:9 image, the image skeleton is `aspect-video`. If your title is `text-xl`, the skeleton is `h-7` (the rendered height of `text-xl`). Measure once, hardcode the skeleton, never tweak. Layout-shifting from skeleton → content (CLS regression) is one of the most common UX bugs in skeleton implementations.

Question 8

How do I install a skeleton example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/skeleton/…`, plus the shadcn/ui Skeleton primitive if you don't already have it. Skeleton is tiny — just a styled div with `animate-pulse` — so the install adds almost no bundle weight.

Question 9

Should the skeleton wait for data, or show immediately?

Accepted Answer

Show immediately when the request starts. If data arrives in under ~200ms (cached / fast network), the skeleton flashes for an awkward instant — debounce by 100ms before showing. For requests over 200ms, the skeleton helps. For requests over 5 seconds, also surface a "Still loading…" message so users don't think the app froze.

Question 10

Where should skeleton screens render in a Suspense / streaming setup?

Accepted Answer

Wrap async Server Components in `}>`. The skeleton renders during the initial HTML stream until the async component is ready. For client-fetched data (TanStack Query, SWR), conditionally render `isLoading ? : `. The Suspense pattern is more elegant for server-rendered apps; the conditional pattern is fine for client-only apps.

Question 11

Which libraries do skeleton examples depend on?

Accepted Answer

shadcn/ui Skeleton (just a styled `

` with `animate-pulse` — no Radix dependency), Tailwind CSS. Composite skeleton examples (cards, tables, profiles) add other shadcn primitives for the surrounding chrome (Card, Table, Avatar). React 19 baseline. No state library — skeletons are pure render.

Question 12

Are skeleton examples accessible for screen reader users?

Accepted Answer

Skeletons should be announced as loading state, not as content. Wrap the skeleton in `

` so screen readers say "loading" and announce when content arrives. Don't include text inside the skeleton ("Loading…") since the visual treatment already conveys that. For prefers-reduced-motion users, the `animate-pulse` should pause — Tailwind's animate-pulse already respects this preference.

Question 13

Can I use these skeleton examples with React Server Components?

Accepted Answer

Yes — skeletons are pure render and work cleanly as Server Components. The canonical pattern: render the Skeleton as the Suspense fallback for async Server Components. The skeleton ships in the initial HTML; the real content streams in when the data resolves. Zero JavaScript needed for the skeleton-to-content swap.

React Skeleton Examples for shadcn/ui

Browse every skeleton example

Frequently Asked Questions