Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Article Preview Skeleton for Solid

An article preview placeholder with an author row, a title, three lines of text and three tag pills.

UI library: Ark UI

A bordered card stands in for an article preview: an author row, a title, three excerpt lines, and three tag pills.

Use it in a feed so the cards keep their size when the posts arrive. If the feed has loaded and is empty, show an Empty state. In Solid, Ark UI does not fetch the articles.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Skeleton anatomy: avatar, title, description, media

Usage

<div class="flex w-full max-w-2xl flex-col gap-4 rounded-md border p-6">
    <div class="flex items-center gap-3">
      <Skeleton class="size-10 rounded-full" />
      <div class="flex flex-col gap-2">
        <Skeleton class="h-4 w-24" />
        <Skeleton class="h-3 w-32" />
      </div>
    </div>
    <Skeleton class="h-6 w-3/4" />
    <Skeleton class="h-4 w-full" />
    <Skeleton class="h-4 w-full" />
    <Skeleton class="h-4 w-2/3" />
    <div class="flex gap-2 pt-2">
      <Skeleton class="h-6 w-16 rounded-full" />
      <Skeleton class="h-6 w-20 rounded-full" />
      <Skeleton class="h-6 w-24 rounded-full" />
    </div>
  </div>

FAQ

What does each bar stand in for?

A size-10 rounded-full circle with an h-4 w-24 line and an h-3 w-32 line is the author. h-6 w-3/4 is the title, three h-4 bars are the excerpt, and three rounded-full pills are the tags.

What classes frame the preview?

The wrapper is flex w-full max-w-2xl flex-col gap-4 rounded-md border p-6. The author row is flex items-center gap-3, and the two name lines stack with gap-2.

Why is the last excerpt line shorter?

The first two excerpt bars are h-4 w-full. The third is h-4 w-2/3, so the block reads as a paragraph that ends early. Match those widths to the real excerpt so the card does not jump.

How are the tag pills built?

A row with flex gap-2 pt-2 holds three Skeletons: h-6 w-16, h-6 w-20 and h-6 w-24, each with rounded-full. rounded-full replaces the radius Skeleton gets from your style.

Where does the pulse come from?

Skeleton adds animate-pulse, bg-muted and data-slot="skeleton". Size and radius stay on each bar. Edit the skeleton file under components/ui to change the pulse for every placeholder.

Should these bars be hidden from assistive tech?

Yes, when nearby text already says the article is loading. Set aria-hidden on each Skeleton so the pulse is not announced as an empty image. The bars are not a loading message on their own.

API Reference

Skeleton

No extra props in this demo. The rest is on the Skeleton page.

All 30 skeleton examples