Shadcn.io is not affiliated with official shadcn/ui
Basic Item
A React list item component with title, description, and action button using shadcn/ui Item with outline variant and ItemActions
Plain lists lack structure and actionability. This React pattern shows Item component with ItemTitle, ItemDescription text, and ItemActions containing outline Button—creates structured list entry with clear hierarchy. Built with shadcn/ui Item components and outline variant with bg-background, it's perfect for settings lists, notification items, file lists, user profiles, feature toggles, or any list where each entry needs title, context, and action creating scannable organized content.
Basic Item preview
Installation
Related Components
Item with Media Icon
Item with icon and chevron
Basic Card
Card with similar structure
List Item
Simple list item pattern
Button Variants
Button styling options
Accordion Item
Collapsible list item
Navigation List
Clickable navigation items
FAQ
Was this page helpful?
Sign in to leave feedback.
Item with Image Media
A React music list using ItemGroup with clickable Items showing album art in ItemMedia image variant, song titles, artists, and duration built with shadcn/ui
Item with Media and Icon
A React clickable list item with BadgeCheckIcon media, title, and ChevronRightIcon using asChild anchor and size-sm built with shadcn/ui Item