# Item

A composable row for lists, settings, and navigation — combines an icon, label, description, and trailing action slot.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentThemeTabs>
  <ThemeTab name="mint">
    <PreviewWithCode name="item">
      <ItemDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="berries">
    <PreviewWithCode name="item">
      <ItemDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="citrine">
    <PreviewWithCode name="item">
      <ItemDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="cinnamon">
    <PreviewWithCode name="item">
      <ItemDemo />
    </PreviewWithCode>
  </ThemeTab>
</ComponentThemeTabs>

## Label only [#label-only]

The simplest form — just a label with an optional icon.

```tsx
<Item>
  <ItemIcon>
    <User />
  </ItemIcon>
  <ItemContent>
    <ItemLabel>Profile</ItemLabel>
  </ItemContent>
</Item>
```

## With description [#with-description]

Add a secondary line for supporting detail. `ItemDescription` truncates long text automatically.

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

## With trailing action [#with-trailing-action]

`ItemAction` anchors to the right with `ml-auto`. Place a badge, icon, or switch inside.

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

## Interactive with `asChild` [#interactive-with-aschild]

Use `asChild` to render `Item` as a `<button>` or `<a>` — the item merges its classes onto the child element so semantics and interactivity are correct.

```tsx
<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>
```

## Without icon [#without-icon]

`ItemIcon` is optional — omit it to push `ItemContent` to the leading edge.

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

## In a list [#in-a-list]

Wrap multiple items in a `<div className="divide-y">` for a standard bordered list.

```tsx
<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>
```

## Props [#props]

### Item [#item]

| Prop        | Type      | Default | Description                                                        |
| ----------- | --------- | ------- | ------------------------------------------------------------------ |
| `asChild`   | `boolean` | `false` | Merges props onto the child element instead of rendering a `<div>` |
| `className` | `string`  | —       | Default layout is `flex items-center gap-3 py-2.5`                 |

### ItemIcon [#itemicon]

<span className="block">
  A 

  `size-9`

   square container with 

  `bg-muted`

   and centered SVG icon. Pass any icon as a child; it is automatically sized to 

  `size-4`

  .
</span>

### ItemContent [#itemcontent]

<span className="block">
  `flex-1 min-w-0`

   column — place 

  `ItemLabel`

   and optionally 

  `ItemDescription`

   inside.
</span>

### ItemLabel [#itemlabel]

<span className="block">
  `text-sm font-medium leading-none`

   paragraph.
</span>

### ItemDescription [#itemdescription]

<span className="block">
  `text-xs text-muted-foreground`

   paragraph with 

  `truncate`

  . For a second line of detail.
</span>

### ItemAction [#itemaction]

<span className="block">
  `ml-auto`

   flex row — place icons, badges, switches, or buttons as trailing content.
</span>

## Usage [#usage]

```tsx
import {
  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>
```

## Specs [#specs]

```md
# 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
```

## Installation [#installation]

<CommandBox componentName="item" className="mt-2" />