Skip to content

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

Free

Article Preview Skeleton for Ark UI

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

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 React, Ark UI does not fetch the articles.

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

Anatomy

Skeleton anatomy: avatar, title, description, media

Usage

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