Skip to content

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

Free

Card with Badge and Tags Skeleton for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not know which tags are coming.

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