Command Palette

Search for a command to run...

Item

A flexible list item component for building complex layouts with media, content, and actions.

New Message

You have a new message from John Doe

Featured Item

This is a featured item with special content

import {	Item,	ItemMedia,	ItemContent,	ItemTitle,	ItemDescription,	ItemActions,} from "@/registry/optics/item";import { Button } from "@/registry/optics/button";import { Mail } from "lucide-react";<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>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/item.json

Props

<Item />
Name
Type
className
string
variant
"default" | "outline" | "muted" (default: "default")
size
"default" | "sm" (default: "default")
asChild
boolean (default: false)

<ItemMedia />
Name
Type
className
string
variant
"default" | "icon" | "image" (default: "default")
<ItemContent />
Name
Type
className
string
<ItemTitle />
Name
Type
className
string
<ItemDescription />
Name
Type
className
string
<ItemActions />
Name
Type
className
string
<ItemHeader />
Name
Type
className
string
<ItemFooter />
Name
Type
className
string
<ItemGroup />
Name
Type
className
string
<ItemSeparator />
Name
Type
className
string
Input OTPKbd