Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Skeleton - Horizontal Card Layout
A horizontal skeleton card with square image on left and content on right including title, text lines, and metadata badges
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Horizontal cards pack information density—image left, content right. This React skeleton card uses shadcn/ui Skeleton with flex-shrink-0 square image (h-24 w-24), title and description lines, plus footer metadata badges. The horizontal layout maximizes screen width—perfect for list views, news feeds, search results, music playlists, email previews, or any interface where horizontal cards allow more content per row than vertical stacking during loading states.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Vertical Card Layout
Image top content below
Simple Card
Basic image and text
Card with Avatar
Avatar and user content
Skeleton List
List item skeletons
Card
Real card component
Badge
Real badge
Questions you might have
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
React Skeleton - Article Preview
An article preview skeleton with circular avatar, author info, title, text lines, and rounded tag pills for loading blog posts