Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · Content

Blog Post Skeleton for React

A blog post placeholder with a large title, an author row, a hero image and two paragraphs.

Framework
UI library

A full-page placeholder for one post: a tall title bar, the author row, a hero image block and two paragraphs of lines. The blocks are Skeleton elements in one column.

Use it on an article page while the post loads, with the title and hero heights set to the real ones.

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 tall is the title bar?

h-10 w-3/4 at the top of a max-w-3xl column with gap-6. Match h-10 to the real heading's line height so the page does not jump when the title arrives.

How is the author row built?

flex items-center gap-4 holds a size-12 rounded-full circle and two lines, h-4 w-32 over h-3 w-40, stacked with gap-2.

What size is the hero block?

h-64 w-full, one bar between the author and the paragraphs. Set that height to the hero you actually render.

How are the two paragraphs shaped?

Each paragraph is a flex flex-col gap-3 of h-4 bars. The first ends on w-5/6. The second has three bars and ends on w-4/6. The short last line is what makes the group read as a paragraph.

Can I slow the pulse on this post?

The pulse is animate-pulse on Skeleton, shared by the title, the circle, the hero and the lines. Change it in the skeleton file under components/ui. data-slot="skeleton" marks every bar.

Should the blog placeholder be in the accessibility tree?

Set aria-hidden on the bars when the page already says the post is loading. Skeleton is decorative. A text status should carry the loading message.

All 30 skeleton examples