Item
One thing in a list: a mark, a leaning title with a line beneath it, and actions at the end.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/itemExamples
A driver, and two links
Mara K. Rush
Rail yards · 41 jobs this month
import { Badge } from "@/components/zero/badge";import { Button } from "@/components/zero/button";import { ChevronRightIcon, LockIcon } from "@/components/zero/icons";import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemSeparator, ItemTitle,} from "@/components/zero/item";export default function ItemDrivers() { return ( <div className="grid w-full max-w-md gap-4"> <Item variant="outline"> <ItemMedia variant="image"> {/* biome-ignore lint/performance/noImgElement: a small SVG sample, and the demo is copied into projects without next/image */} <img src="/samples/portrait-a.svg" alt="" /> </ItemMedia> <ItemContent> <ItemTitle> Mara K. <Badge>Rush</Badge> </ItemTitle> <ItemDescription>Rail yards · 41 jobs this month</ItemDescription> </ItemContent> <ItemActions> <Button size="sm" variant="secondary"> Assign </Button> </ItemActions> </Item> <ItemGroup> <Item render={(props) => <a href="#locked" {...props} />}> <ItemMedia variant="icon"> <LockIcon /> </ItemMedia> <ItemContent> <ItemTitle>Locked jobs</ItemTitle> <ItemDescription>Open once you reach rank 3.</ItemDescription> </ItemContent> <ChevronRightIcon className="text-zero-text-3" /> </Item> <ItemSeparator /> <Item render={(props) => <a href="#history" {...props} />}> <ItemContent> <ItemTitle>History</ItemTitle> <ItemDescription>Every job you handed in.</ItemDescription> </ItemContent> <ChevronRightIcon className="text-zero-text-3" /> </Item> </ItemGroup> </div> );}Behaviour
Plain, outlined in the quiet line, or on the raised grey. As a link (render) it lights to the raised grey when pointed at and takes the focus frame. ItemMedia holds an icon in a small slanted well, or a picture in an ink frame.
ItemGroup stacks items and ItemSeparator divides them.
Props
Item
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "outline" | "muted" | "default" | Plain, outlined, or on the raised grey. |
| size | "default" | "sm" | "default" | How much room around it. |
| render | ReactElement | function | — | The element to render as, such as a link. |
ItemMedia
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "icon" | "image" | "default" | A bare icon, an icon in a slanted well, or a framed picture. |