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 Svelte, Ark UI does not load the comments.
Installation
Anatomy
Usage
<div class="flex w-full max-w-2xl flex-col gap-4">{#each COMMENTS as comment (comment)}<div class="flex gap-3"><Skeleton class="size-10 shrink-0 rounded-full" /><div class="flex flex-1 flex-col gap-2"><div class="flex items-center gap-2"><Skeleton class="h-4 w-24" /><Skeleton class="h-3 w-16" /></div><Skeleton class="h-4 w-full" /><Skeleton class="h-4 w-5/6" /><div class="flex gap-3 pt-2"><Skeleton class="h-6 w-12" /><Skeleton class="h-6 w-14" /></div></div></div>{/each}</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.
