shadcn.io is an independent project built on shadcn/ui
Three comments stack up. Each has an avatar, a name and a time, two lines of text, and two small bars for the actions. The demo always draws three.
Use it for comments or reviews while the thread loads. If you already know there are none, an Empty state is the honest screen. In React, Base UI does not load the comments.
Installation
Anatomy
Usage
<div className="flex w-full max-w-2xl flex-col gap-4">
{COMMENTS.map((comment) => (
<div className="flex gap-3" key={comment}>
<Skeleton className="size-10 shrink-0 rounded-full" />
<div className="flex flex-1 flex-col gap-2">
<div className="flex items-center gap-2">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-3 w-16" />
</div>
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-5/6" />
<div className="flex gap-3 pt-2">
<Skeleton className="h-6 w-12" />
<Skeleton className="h-6 w-14" />
</div>
</div>
</div>
))}
</div>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.
API Reference
Skeleton
No extra props in this demo. The rest is on the Skeleton page.
