Question 1

What is a skeleton?

Accepted Answer

A loading placeholder: muted blocks where text, images and controls will appear, so the page shows its layout before the data arrives. Each example here is shadcn.io's Skeleton component, available for React with Base UI, React Aria, Ark UI and Radix UI, and for Vue, Svelte and Solid with Ark UI, composed into one layout with Tailwind CSS classes. Each example is one small file.

Question 2

Are these skeleton examples free?

Accepted Answer

Yes. Every skeleton example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

Why use a skeleton instead of a spinner?

Accepted Answer

A skeleton shows what is coming: the card, the rows, the form. The layout is in place before the content, so nothing jumps when it arrives. A spinner only says that something is busy, which suits a button or a region with no fixed shape. For lists, tables and pages whose shape you know, use a skeleton.

Question 4

When should I use a skeleton versus an empty state?

Accepted Answer

A skeleton means the data is still loading. An empty state means it has loaded and there is nothing to show. Keep loading and empty as two separate states: a skeleton that never ends looks broken, and No results shown while the request is still running is wrong.

Question 5

How do I build a card skeleton?

Accepted Answer

Put one Skeleton where each part of the card goes: a tall block for the image, a bar for the title, shorter bars for the text. Give each one a height and a width with classes, and make the last line shorter so the text reads as a paragraph. The card examples show image-first, horizontal, avatar and tagged cards.

Question 6

How do I build a table skeleton?

Accepted Answer

The table examples lay out rows with a CSS grid and put a Skeleton bar in each cell, with a border under the header row. Match the number of columns to the real table, and show enough rows to fill the visible area. You can also put the bars inside the cells of a real Table so the header stays real.

Question 7

How do I avoid layout shift when the content loads?

Accepted Answer

Give each placeholder the size of what replaces it: the same image height, a bar as tall as the line of text, the same input and button heights. Avatars and icons get the same size class as the real ones, and `shrink-0` keeps them from squeezing in a flex row.

Question 8

How do I install a skeleton example?

Accepted Answer

Sign in with a free account, then copy the code or run the install command on the example's page. It adds the example and the Skeleton component to your project if you don't have it yet. Then change the blocks to match your own layout.

Question 9

Should the skeleton show right away?

Accepted Answer

Show it when the request starts. If your data usually arrives in a few hundred milliseconds, wait briefly before showing it so it doesn't flash. For a long load, add a text status such as Still loading so people know the page hasn't stopped.

Question 10

How do I change the color or the pulse?

Accepted Answer

Skeleton adds `animate-pulse` and its style's `bg-muted` fill and radius, and marks each block with `data-slot="skeleton"`. Edit the skeleton file in your ui folder to change them for every block. Size and radius on a single block go in its classes, such as `rounded-full` for an avatar.

Question 11

What do the skeleton examples depend on?

Accepted Answer

Only the Skeleton component and Tailwind CSS. The examples have no state, no data and no icons: every block is a Skeleton with size classes, inside plain layout elements.

Question 12

Are skeleton examples accessible?

Accepted Answer

The blocks are decorative. Set `aria-hidden` on them, or on their wrapper, and say that the content is loading in text, such as a visually hidden status or `aria-busy` on the region being loaded. When the content arrives, it replaces the placeholders.

Question 13

Can I use these examples with React Server Components?

Accepted Answer

Yes. On React they are static markup with no state or handlers, so they render as Server Components, for instance as the fallback of a Suspense boundary while the real content streams in.

Skeleton Examples

Card with Avatar and Content

Card with Badge and Tags

Horizontal Card Layout

Simple Card with Image and Text

Vertical Card Layout

Article Preview

Blog Post

Comment Thread

Content with Sidebar

Detailed Article

Form with Labels

Form with Sections

More component examples

Sonner

Spinner

Alert

Empty State

Progress

Slider

Switch

Table

Skeleton examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every skeleton example. One prompt away.