Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · Content

Comment Thread Skeleton for React

Three comment placeholders, each with an avatar, a name and time, two lines of text and two actions.

Framework
UI library

A loading thread: three comments, each with an avatar, a name and a time, two lines of text and two small blocks for the actions under it. The rows come from a static list of keys, and every block is a Skeleton.

Use it for comment sections, reviews or discussion threads.

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 many comments does this show?

Three. COMMENTS maps comment-1, comment-2 and comment-3 into a max-w-2xl column with gap-4. Each row is flex gap-3.

What is in the comment header?

A size-10 shrink-0 rounded-full circle, then a flex-1 column. The name is h-4 w-24 and the time is h-3 w-16, in a row with gap-2 and items-center.

How long is the comment text?

Two h-4 bars, w-full and w-5/6, with gap-2 in the column. The shorter second line reads as the end of the comment.

What are the two small bars under the text?

h-6 w-12 and h-6 w-14 in a flex gap-3 pt-2 row. They hold the place of the two actions under each comment.

Why is the avatar shrink-0?

shrink-0 keeps the size-10 circle from squeezing when the text column is flex-1. The circle stays round in a narrow thread.

Should the thread skeleton be hidden?

Set aria-hidden on each Skeleton when the page already says comments are loading. The pulse is decorative, so a text status should carry that message.

All 30 skeleton examples