Skip to content

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

Free

Card with Badge and Tags Skeleton for React

A bordered card placeholder with two pill tags, a title, two lines of text and two buttons.

A bordered card shows two pill tags, a title, two lines of text, and two button-sized blocks along the bottom.

Use it for a post or a product whose tags and actions already have a size. If only those actions are busy, put a Spinner on the button. In React, Base UI does not know which tags are coming.

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-sm flex-col gap-3 rounded-md border p-4">
  <div className="flex items-center gap-2">
    <Skeleton className="h-5 w-16 rounded-full" />
    <Skeleton className="h-5 w-20 rounded-full" />
  </div>
  <Skeleton className="h-6 w-3/4" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-5/6" />
  <div className="mt-2 flex gap-2">
    <Skeleton className="h-8 w-20" />
    <Skeleton className="h-8 w-24" />
  </div>
</div>

FAQ

What is the card frame?

flex w-full max-w-sm flex-col gap-3 rounded-md border p-4. Tags, title, two text lines and two buttons stack in that order.

How are the tags drawn?

A flex items-center gap-2 row holds h-5 w-16 rounded-full and h-5 w-20 rounded-full. rounded-full replaces the radius Skeleton gets from your style.

What sizes are the title and the text?

The title is h-6 w-3/4. The two lines under it are h-4 w-full and h-4 w-5/6.

How are the two buttons shown?

A mt-2 flex gap-2 row holds h-8 w-20 and h-8 w-24. Match those widths to the real button labels.

Do the pills pulse with the rest of the card?

Yes. Every Skeleton has animate-pulse and bg-muted. Change the animation in the skeleton file under components/ui if the whole card should pulse differently.

Should these placeholders be announced?

Set aria-hidden on them when nearby text already says the card is loading. The bars are decorative, and a text status should carry the message.

API Reference

Skeleton

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

All 30 skeleton examples