Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Basic Item
A React list item component with title, description, and action button using shadcn/ui Item with outline variant and ItemActions
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
A simple item with title and description.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React 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
React 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