Item
A flexible list item component for building complex layouts with media, content, and actions.
Item
New Message
You have a new message from John Doe
Featured Item
This is a featured item with special content
import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemSeparator, ItemTitle } from "@/components/optics/item";import { Button } from "@/components/optics/button";import { Mail, Star } from "lucide-react";<ItemGroup> <Item> <ItemMedia variant="icon"> <Mail /> </ItemMedia> <ItemContent> <ItemTitle> New Message </ItemTitle> <ItemDescription> You have a new message from John Doe </ItemDescription> </ItemContent> <ItemActions> <Button size="sm"> View </Button> </ItemActions> </Item> <ItemSeparator /> <Item> <ItemMedia variant="icon"> <Star /> </ItemMedia> <ItemContent> <ItemTitle> Featured Item </ItemTitle> <ItemDescription> This is a featured item with special content </ItemDescription> </ItemContent> <ItemActions> <Button size="sm" variant="secondary" > Details </Button> </ItemActions> </Item></ItemGroup>import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemSeparator, ItemTitle } from "@/components/optics/item";import { Button } from "@/components/optics/button";import { Mail, Star } from "lucide-react";<ItemGroup> <Item> <ItemMedia variant="icon"> <Mail /> </ItemMedia> <ItemContent> <ItemTitle> New Message </ItemTitle> <ItemDescription> You have a new message from John Doe </ItemDescription> </ItemContent> <ItemActions> <Button size="sm"> View </Button> </ItemActions> </Item> <ItemSeparator /> <Item> <ItemMedia variant="icon"> <Star /> </ItemMedia> <ItemContent> <ItemTitle> Featured Item </ItemTitle> <ItemDescription> This is a featured item with special content </ItemDescription> </ItemContent> <ItemActions> <Button size="sm" variant="secondary" > Details </Button> </ItemActions> </Item></ItemGroup>Installation
pnpm dlx shadcn@latest add @optics/item
Props
<Item />
Name | Type | |
|---|---|---|
variant | string(default: default) | |
render | string(default: undefined) |
<ItemMedia />
Name | Type | |
|---|---|---|
variant | string(default: default) |