Item

Copy<Item>
  <ItemIcon>
    <User />
  </ItemIcon>
  <ItemContent>
    <ItemLabel>Profile</ItemLabel>
  </ItemContent>
</Item>

Copy<Item>
  <ItemIcon>
    <Mail />
  </ItemIcon>
  <ItemContent>
    <ItemLabel>Email</ItemLabel>
    <ItemDescription>nuno@example.com</ItemDescription>
  </ItemContent>
</Item>

Copy<Item>
  <ItemIcon>
    <Bell />
  </ItemIcon>
  <ItemContent>
    <ItemLabel>Notifications</ItemLabel>
    <ItemDescription>Push and email alerts</ItemDescription>
  </ItemContent>
  <ItemAction>
    <Badge>3</Badge>
  </ItemAction>
</Item>

Copy<Item asChild>
  <button className="w-full cursor-pointer hover:bg-muted/50 rounded-md px-2 transition-colors">
    <ItemIcon>
      <Lock />
    </ItemIcon>
    <ItemContent>
      <ItemLabel>Security</ItemLabel>
      <ItemDescription>Password and 2FA</ItemDescription>
    </ItemContent>
    <ItemAction>
      <ChevronRight className="size-4 text-muted-foreground" />
    </ItemAction>
  </button>
</Item>

Copy<Item>
  <ItemContent>
    <ItemLabel>Billing</ItemLabel>
    <ItemDescription>Manage your subscription</ItemDescription>
  </ItemContent>
  <ItemAction>
    <CreditCard className="size-4 text-muted-foreground" />
  </ItemAction>
</Item>

Copy<div className="divide-y rounded-lg border">
  <Item className="px-4">
    <ItemContent>
      <ItemLabel>General</ItemLabel>
    </ItemContent>
    <ItemAction>
      <ChevronRight className="size-4 text-muted-foreground" />
    </ItemAction>
  </Item>
  <Item className="px-4">
    <ItemContent>
      <ItemLabel>Notifications</ItemLabel>
    </ItemContent>
    <ItemAction>
      <ChevronRight className="size-4 text-muted-foreground" />
    </ItemAction>
  </Item>
</div>

Copyimport {
  Item,
  ItemAction,
  ItemContent,
  ItemDescription,
  ItemIcon,
  ItemLabel,
} from "@/components/ui/item";
 
<Item>
  <ItemIcon>
    <User />
  </ItemIcon>
  <ItemContent>
    <ItemLabel>Profile</ItemLabel>
    <ItemDescription>Manage your account</ItemDescription>
  </ItemContent>
  <ItemAction>
    <ChevronRight className="size-4 text-muted-foreground" />
  </ItemAction>
</Item>

Copy# Mint — Item Specs
 
## Component
- name: item
- file: registry/mint/item.tsx
- installs to: components/ui/item.tsx
- dependencies: radix-ui
- registryDependencies: none
 
## What is it
A composable flex row used as a building block for lists, settings panels,
navigation drawers, and notification feeds. Provides consistent spacing,
icon sizing, and trailing-action alignment without coupling to a specific
semantic element. Use Item when you need a reusable row with an optional
icon, label, description, and trailing slot. Do not use it as a standalone
interactive element — apply interactivity via asChild.
 
## Visual identity
Calm, low-profile layout with a soft mint tint. The icon slot uses --muted as
a green-tinted square container, keeping emphasis on the label. No border or
shadow by default — density and containment are added by the surrounding
list wrapper.
 
## Design tokens
--muted: oklch(0.96 0.02 155) / oklch(0.2 0.03 155)         — ItemIcon background
--muted-foreground: oklch(0.52 0.06 155) / oklch(0.6 0.06 155) — ItemIcon icon colour, ItemDescription text
 
## Sub-components
- Item            → root flex row (flex items-center gap-3 py-2.5); supports asChild
- ItemIcon        → size-9 square container, bg-muted, auto-sizes child SVG to size-4
- ItemContent     → flex-1 min-w-0 column; wraps ItemLabel and ItemDescription
- ItemLabel       → text-sm font-medium leading-none primary text line
- ItemDescription → text-xs text-muted-foreground mt-1 truncate secondary line
- ItemAction      → ml-auto trailing slot for icons, badges, switches, or buttons
 
## States
- asChild / interactive: hover and focus styles must be applied on the child element directly; Item provides no built-in hover or focus styles
 
## Conventions
- Sub-components expose data-slot="item", data-slot="item-icon", data-slot="item-content", data-slot="item-label", data-slot="item-description", data-slot="item-action" for CSS targeting
- Use asChild with <button> or <a> to get correct semantics and interactivity
- Wrap multiple items in <div className="divide-y"> for bordered list rows
- Add px-4 to Item when inside a bordered card or panel
- Use border rounded-lg on the wrapping div for a contained list appearance
- ItemIcon is optional — omit it to push ItemContent to the leading edge
- ItemDescription truncates long text automatically; do not nest block elements inside it