Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · Content

Detailed Article Skeleton for React

A long-form article placeholder with a title, a hero image, two titled sections and a second image.

Framework
UI library

A loading page for long reads: a title and a subtitle, a tall hero image, two sections that each open with a heading, and a second image. The blocks are Skeleton elements in one column.

Use it for tutorials, guides or magazine articles where the page has several sections.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the article column spaced?

flex w-full max-w-3xl flex-col gap-8. A header group, an h-96 image, then a gap-6 stack of two sections and a second image.

What is in the header?

gap-4 stacks an h-8 w-3/4 title and an h-4 w-1/2 line under it.

How does a section differ from a paragraph?

Each section starts with an h-6 heading, w-48 then w-40, above h-4 lines in a gap-3 column. The first section ends on w-5/6. The second ends on w-4/6.

What sizes are the two images?

The hero is h-96 w-full. The later image is h-48 w-full, inside the gap-6 stack. Match both heights to the images you render.

Do the headings pulse the same way as the lines?

Yes. Title, headings, lines and images are all Skeleton, so they share animate-pulse and bg-muted. data-slot="skeleton" is on each one.

Should this article skeleton be hidden?

Set aria-hidden on each bar when the page already says the article is loading. Do not leave the pulse as the only loading message.

All 30 skeleton examples