# Item

> A flexible list-row layout: media, content, and actions with variants.

_Updated: 2026-06-04_

A flexible list-row layout: media, content, and actions with variants.

## Installation

```bash
railbase ui add item
```

Peer dependencies:

```bash
npm install class-variance-authority
```

## Usage

```tsx
import { Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions } from "@/lib/ui/item";

<Item variant="outline">
  <ItemMedia><Avatar /></ItemMedia>
  <ItemContent>
    <ItemTitle>Title</ItemTitle>
    <ItemDescription>Description.</ItemDescription>
  </ItemContent>
  <ItemActions><Button size="sm">Open</Button></ItemActions>
</Item>
```

## Anatomy

Exported parts: `Item` · `ItemMedia` · `ItemContent` · `ItemTitle` · `ItemDescription` · `ItemActions` · `ItemFooter` · `ItemGroup` · `ItemSeparator`