Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Skeleton - Simple Card with Image and Text
A simple skeleton card with rectangular image placeholder and two text line skeletons for loading content previews
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Content loading shouldn't look broken—skeleton screens show structure while data loads. This React skeleton card uses shadcn/ui Skeleton components with rectangular image placeholder (h-48) and two text lines at different widths (3/4 and 1/2). The visual hierarchy mimics real cards—perfect for blog post previews, product cards, article listings, media feeds, or any card-based layout where showing loading structure reduces perceived wait time and prevents layout shifts.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Vertical Card Layout
Image top with content below
Horizontal Card Layout
Image left content right
Card with Avatar
Avatar and user content
Skeleton List
List item skeletons
Card
Real card component
Skeleton Form
Form field skeletons
Questions you might have
React Top-Sliding Sheet
A top-sliding sheet with side equals top prop for notifications, alerts, and announcements sliding from top edge
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