# Item

A flexible component for displaying content with media, title, description, and actions.

> 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).





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

## Installation [#installation]

<Tabs defaultValue="cli">
  <TabsList>
    <TabsTrigger value="cli">
      CLI
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add https://shadcn-cssinjs.com/r/item.json
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      pnpm add @base-ui/react @stylexjs/stylex
      ```

      <Step>
        Make sure [StyleX is configured](/docs/installation) and the design tokens are
        installed.
      </Step>

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="item" title="item.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</Tabs>

## Usage [#usage]

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

```tsx
<Item>
  <ItemMedia>
    <Icon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Item</ItemTitle>
    <ItemDescription>Description</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button>Action</Button>
  </ItemActions>
</Item>
```

## Composition [#composition]

Use the following composition to build an `Item`:

```text
Item
├── ItemMedia
├── ItemContent
│   ├── ItemTitle
│   └── ItemDescription
└── ItemActions
```

## Variant [#variant]

Use the `variant` prop to change the style of the item.

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

## Size [#size]

Use the `size` prop to change the size of the item.

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

## Examples [#examples]

### Icon [#icon]

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

### Avatar [#avatar]

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

### Image [#image]

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

### Group [#group]

Use the `ItemGroup` component to group related items together.

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

### Header [#header]

Use the `ItemHeader` component to display a header above the item content.

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

### Link [#link]

Render an item as a link using the `render` prop.

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

### Dropdown [#dropdown]

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



## RTL [#rtl]

To enable right-to-left support, see the [RTL guide](/docs/rtl).

<ComponentPreview name="item-rtl" direction="rtl">
  <ItemRtl />
</ComponentPreview>

## API Reference [#api-reference]

### Item [#item]

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

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

### ItemGroup [#itemgroup]

A container that groups related items together with consistent styling.

### ItemSeparator [#itemseparator]

A separator between items in a group.

### ItemMedia [#itemmedia]

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

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

### ItemContent [#itemcontent]

Wraps the title and description of the item.

### ItemTitle [#itemtitle]

Displays the title of the item.

### ItemDescription [#itemdescription]

Displays the description of the item.

### ItemActions [#itemactions]

Container for action buttons or other interactive elements.

### ItemHeader [#itemheader]

Displays a header above the item content.

### ItemFooter [#itemfooter]

Displays a footer below the item content.