Components / Layout
ListItem
Composable list item primitives for directories.
Preview
SA
Sara Ahmed
Product designer
Design
1import { List, ListItem, ListItemAvatar, ListItemContent } from "@/components/ui/list-item"2
3export function ListItemDemo() {4 return (5 <List>6 <ListItem>7 <ListItemAvatar initials="SA" />8 <ListItemContent primary="Sara Ahmed" secondary="Designer" />9 </ListItem>10 </List>11 )12}Installation
Add the source directly to your project with the shadcn CLI.
npx shadcn@latest add qentrah/DUI/list-itemUsage
Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.