---
title: Item
description: A versatile component that you can use to display any content.
icon: align-horizontal-space-around
author:
  name: shadcn
  url: https://github.com/shadcn
mode: wide
---

<PoweredBy packages={[{ name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/item' }]} />

### Installation

```package-install
npx shadcn@latest add @redpanda/item
```

<ComponentPreview name="item-demo" />

## When to use

The `Item` component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the `ItemGroup` component to create a list of items.

You can pretty much achieve the same result with the `div` element and some classes, but **I've built this so many times** that I decided to create a component for it. Now I use it all the time.

Use this decision tree to determine when to use the Item component:

```mermaid
graph TD;
    A[❓ Need to display content?] -->|Yes| B{Form input control?};
    A -->|No| C[ℹ️ Use plain div];
    B -->|Yes| D[ℹ️ Use Field component];
    B -->|No| E{Title + description?};
    E -->|Yes| F[✅ Use Item];
    F --> G{Need media/icon?};
    G -->|Yes| H[✅ Add ItemMedia];
    G -->|No| I[✅ Just ItemContent];
    F --> J{Need action buttons?};
    J -->|Yes| K[✅ Add ItemActions];
    F --> L{Multiple items?};
    L -->|Yes| M[✅ Wrap with ItemGroup];
    F --> N{Make it clickable?};
    N -->|Yes| O[✅ Use render with link];

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;

    class F,H,I,K,M,O recommended;
    class D discouraged;
    class A,B,E,G,J,L,N decision;
    class C neutral;
```

## Usage

```tsx lineNumbers
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemFooter,
  ItemHeader,
  ItemMedia,
  ItemTitle,
} from '@/components/ui/item';
```

```tsx lineNumbers
<Item>
  <ItemHeader>Item Header</ItemHeader>
  <ItemMedia />
  <ItemContent>
    <ItemTitle>Item</ItemTitle>
    <ItemDescription>Item</ItemDescription>
  </ItemContent>
  <ItemActions />
  <ItemFooter>Item Footer</ItemFooter>
</Item>
```

## Anatomy

The Item component is a flexible container for displaying content. Here's how the components work together:

```tsx
<ItemGroup>
  <li>
    <Item>
      <ItemHeader />
      <ItemMedia>
        <Icon />
      </ItemMedia>
      <ItemContent>
        <ItemTitle />
        <ItemDescription />
      </ItemContent>
      <ItemActions>
        <Button />
      </ItemActions>
      <ItemFooter />
    </Item>
    <ItemSeparator />
  </li>
  <li>
    <Item />
  </li>
</ItemGroup>
```

### Layout Structure

- **ItemGroup**: Container that groups multiple items with consistent styling
- **Item**: Root flex container with hover/focus states and sizing variants
- **ItemHeader**: Optional header displayed above the main content
- **ItemMedia**: Container for visual elements (icons, avatars, images)
- **ItemContent**: Flex column grouping title and description
- **ItemTitle**: Primary heading text
- **ItemDescription**: Secondary supporting text
- **ItemActions**: Container for buttons or interactive elements
- **ItemFooter**: Optional footer displayed below the main content
- **ItemSeparator**: Visual divider between items in a group

### Variants and Sizes

Item supports variants via the `variant` prop:

- **default**: Standard styling
- **outline**: With border
- **muted**: Muted background

Item supports sizes via the `size` prop:

- **md**: Standard padding and spacing
- **sm**: Compact padding for dense layouts
- **xs**: Extra-compact padding for very dense layouts

### Typical Usage Patterns

```tsx expandable
// Simple item with icon
<Item>
  <ItemMedia variant="icon">
    <FileIcon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Document.pdf</ItemTitle>
    <ItemDescription>2.4 MB · Modified 2 hours ago</ItemDescription>
  </ItemContent>
</Item>

// Item with avatar and actions
<Item>
  <ItemMedia>
    <Avatar>
      <AvatarImage src="..." />
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  </ItemMedia>
  <ItemContent>
    <ItemTitle>John Doe</ItemTitle>
    <ItemDescription>john@example.com</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button variant="ghost" size="sm">Follow</Button>
  </ItemActions>
</Item>

// Clickable item (as link)
<Item
  render={
    <a href="/settings">
      <ItemMedia variant="icon">
        <SettingsIcon />
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Settings</ItemTitle>
        <ItemDescription>Manage your account preferences</ItemDescription>
      </ItemContent>
    </a>
  }
/>

// Item with header and footer
<Item variant="outline">
  <ItemHeader>
    <Badge>New</Badge>
  </ItemHeader>
  <ItemContent>
    <ItemTitle>Feature Update</ItemTitle>
    <ItemDescription>Check out our latest features</ItemDescription>
  </ItemContent>
  <ItemFooter>
    <Button variant="link" size="sm">Learn more →</Button>
  </ItemFooter>
</Item>

// List of items
<ItemGroup>
  <li>
    <Item size="sm">
      <ItemMedia variant="icon"><HomeIcon /></ItemMedia>
      <ItemContent><ItemTitle>Home</ItemTitle></ItemContent>
    </Item>
    <ItemSeparator />
  </li>
  <li>
    <Item size="sm">
      <ItemMedia variant="icon"><SettingsIcon /></ItemMedia>
      <ItemContent><ItemTitle>Settings</ItemTitle></ItemContent>
    </Item>
  </li>
</ItemGroup>
```

## Item vs Field

Use `Field` if you need to display a form input such as a checkbox, input, radio, or select.

If you only need to display content such as a title, description, and actions, use `Item`.

## Examples

### Variant

<ComponentPreview name="item-variant-demo" />

### Size

The `Item` component has different sizes for different use cases. For example, you can use the `sm` size for a compact item or the `md` size for a standard item.

<ComponentPreview name="item-size-demo" />

### Icon

<ComponentPreview name="item-icon-demo" />

### Avatar

<ComponentPreview name="item-avatar-demo" />

### Image

<ComponentPreview name="item-image-demo" />

### Group

<ComponentPreview name="item-group-demo" />

### Header

<ComponentPreview name="item-header-demo" />

### Link

To render an item as a link, use the `render` prop. The hover and focus states will be applied to the anchor element.

<ComponentPreview name="item-link-demo" />

### Dropdown

<ComponentPreview name="item-dropdown-demo" />

## API Reference

### Item

The main component for displaying content with media, title, description, and actions.

| Prop      | Type                                | Default     |
| --------- | ----------------------------------- | ----------- |
| `variant` | `"default" \| "outline" \| "muted"` | `"default"` |
| `size`    | `"md" \| "sm" \| "xs"`              | `"md"`      |
| `render`  | `React.ReactElement`                | `—`         |

```tsx
<Item size="md" variant="outline">
  <ItemMedia />
  <ItemContent>
    <ItemTitle>Item</ItemTitle>
    <ItemDescription>Item</ItemDescription>
  </ItemContent>
  <ItemActions />
</Item>
```

You can use the `render` prop to render a custom component as the item, for example a link. The hover and focus states will be applied to the custom component.

```tsx
import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';

export function ItemLink() {
  return (
    <Item
      render={
        <a href="/dashboard">
          <ItemMedia variant="icon">
            <Home />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>Dashboard</ItemTitle>
            <ItemDescription>Overview of your account and activity.</ItemDescription>
          </ItemContent>
        </a>
      }
    />
  );
}
```

### ItemGroup

The `ItemGroup` component is a native `ul`. Wrap every item in a `li`; keep separators inside the preceding list item. A linked `Item` stays a link inside that list item instead of replacing its link role with `listitem`. Its ref points to `HTMLUListElement`.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<ItemGroup>
  <li>
    <Item />
  </li>
  <li>
    <Item />
  </li>
</ItemGroup>
```

### ItemSeparator

The `ItemSeparator` component is a separator that separates items in the item group.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<ItemGroup>
  <li>
    <Item />
    <ItemSeparator />
  </li>
  <li>
    <Item />
  </li>
</ItemGroup>
```

### ItemMedia

Use the `ItemMedia` component to display media content such as icons, images, or avatars.

| Prop        | Type                             | Default     |
| ----------- | -------------------------------- | ----------- |
| `variant`   | `"default" \| "icon" \| "image"` | `"default"` |
| `className` | `string`                         |             |

```tsx
<ItemMedia variant="icon">
  <Icon />
</ItemMedia>
```

```tsx
<ItemMedia variant="image">
  <img src="..." alt="..." />
</ItemMedia>
```

### ItemContent

The `ItemContent` component wraps the title and description of the item.

You can skip `ItemContent` if you only need a title.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<ItemContent>
  <ItemTitle>Item</ItemTitle>
  <ItemDescription>Item</ItemDescription>
</ItemContent>
```

### ItemTitle

Use the `ItemTitle` component to display the title of the item.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<ItemTitle>Item Title</ItemTitle>
```

### ItemDescription

Use the `ItemDescription` component to display the description of the item.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<ItemDescription>Item description</ItemDescription>
```

### ItemActions

Use the `ItemActions` component to display action buttons or other interactive elements.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<ItemActions>
  <Button>Action</Button>
  <Button>Action</Button>
</ItemActions>
```

### ItemHeader

Use the `ItemHeader` component to display a header in the item.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<ItemHeader>Item Header</ItemHeader>
```

### ItemFooter

Use the `ItemFooter` component to display a footer in the item.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<ItemFooter>Item Footer</ItemFooter>
```

## Props

<div className="flex flex-row gap-x-3">
  <ExternalLink href="https://ui.shadcn.com/docs/components/item" text="Docs" />
</div>

## Credits

- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/item) for the `item` component and style.