Item
List row with media, title, description and actions, for settings, people, files and notifications.
Installs @radix-ui/react-slot.
Sign-in and security
Installation
npx shadcn@latest add https://neonkit.heyaadi.com/r/item.jsonUsage
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemMedia,
ItemTitle,
} from "@/components/ui/item"
<Item variant="outline">
<ItemMedia variant="icon">
<KeyRound />
</ItemMedia>
<ItemContent>
<ItemTitle>Passkeys</ItemTitle>
<ItemDescription>2 registered</ItemDescription>
</ItemContent>
<ItemActions>
<Button variant="ghost" size="sm">Manage</Button>
</ItemActions>
</Item>Examples
People
Avatars as media, a badge in the title, and a muted row for a pending invite.
Notifications
active lights the edge of unread rows. Clicking one marks it read.
Files
asChild buttons as a selectable list. The lit edge follows the selection.
Variants and sizes
API reference
Item
A row: media, content and actions. Renders a div and accepts every native div attribute.
| Prop | Type | Default |
|---|---|---|
variant | "default"Bare, bordered, or on a faint fill. | "default" |
size | "sm"Minimum height 48, 64 or 80px, with matching padding. | "md" |
active | booleanLights the leading edge, for the selected or unread row. | false |
asChild | booleanRenders the single child (a link or button) as the row, with hover and focus styles. | false |
color | NeonColorPalette name or hex. | inherited |
ItemMedia
The leading slot.
| Prop | Type | Default |
|---|---|---|
variant | "default"Bare, an icon on a tile that lights with the row, or a photo cropped to a circle. | "default" |
ItemDescription
Secondary text under the title.
| Prop | Type | Default |
|---|---|---|
lines | 1Clamp to one line with an ellipsis or two, or "none" to wrap in full. Two or more lines pin the media to the top. | 2 |
ItemGroup, ItemSeparator
A list of rows and a hairline between them.
| Prop | Type | Default |
|---|---|---|
ItemGroup | divrole="list"; rows inside become listitems, links get a listitem wrapper. | None |
inset | numberItemSeparator: start the rule this many px in, to line up with the text. | 0 |
ItemContent, ItemTitle, ItemActions
Layout parts. Each accepts native div attributes.
| Prop | Type | Default |
|---|---|---|
ItemTitle | divA flex row, so badges and timestamps can sit beside the title. Wrap the title text in a span to truncate it. | None |
ItemActions | divTrailing controls, kept at their natural width. | None |
Accessibility
- Item is layout only. Make a row interactive with asChild and a real <a> or <button>, never an onClick on the div.
- Inside ItemGroup, rows are listitems of a list, so screen readers announce the count.
- Interactive rows get the standard focus ring; the lit edge is an extra signal, not the only one.