Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Skeleton - Card with Badge and Tags
A skeleton card with rounded badge placeholders, title, content text lines, and action button skeletons for tagged content loading
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Tags categorize content—badges show at a glance. This React skeleton card features shadcn/ui Skeleton with rounded-full badge placeholders (h-5 w-16), title and content lines, plus action buttons at bottom. The layout matches tagged content cards—perfect for blog posts with categories, products with labels, articles with topics, event cards with tags, or any interface where badge metadata and actionable buttons define the card structure during loading state.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Card with Avatar
Avatar and user content
Vertical Card Layout
Image with content below
Badge
Real badge component
Simple Card
Basic image and text
Button
Real button component
Card
Card container
Questions you might have
React Skeleton - Card with Avatar and Content
A skeleton card with circular avatar placeholder and user content including name, subtitle, and text lines within bordered container
React Skeleton - Vertical Card Layout
A vertical skeleton card with image on top, title and content text below, plus footer with price and button placeholders