Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Skeleton examples · Card

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.

Framework
UI library

A loading card for tagged content: two pill-shaped tags on top, a title, two lines of text and two button-sized blocks at the bottom. Each block is a Skeleton; rounded-full turns the tags into pills.

Use it for posts with categories, products with labels or events with tags.

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

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.

All 30 skeleton examples