---
title: Item
description: "A flexible list row with media, content, and actions."
---
```tsx
import * as stylex from '@stylexjs/stylex';
import { Button } from '@/components/ui/button';
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemGroup,
ItemMedia,
ItemTitle,
} from '@/components/ui/item';
import { Switch } from '@/components/ui/switch';
import { container } from '@/lib/constants.stylex';
export default function ItemDemo() {
return (
-
Two-factor authentication
Add an extra layer of security to your account.
-
Update available
Version 2.4 is ready to install.
);
}
const styles = stylex.create({
group: {
maxWidth: container.xl,
},
});
```
## Install
```bash
npx shadcn@latest add @madeui/item
```
## Usage
```tsx
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemGroup,
ItemMedia,
ItemTitle,
} from '@/components/ui/item';
```
## Composition
```tsx
-
```
## Variants
```tsx
import * as stylex from '@stylexjs/stylex';
import { Item, ItemContent, ItemDescription, ItemGroup, ItemTitle } from '@/components/ui/item';
import { container } from '@/lib/constants.stylex';
export default function ItemVariants() {
return (
-
Default
A borderless row.
-
Outline
A bordered row.
-
Muted
A tinted background row.
);
}
const styles = stylex.create({
group: {
maxWidth: container.xl,
},
});
```
## Sizes
```tsx
import * as stylex from '@stylexjs/stylex';
import { Item, ItemContent, ItemGroup, ItemTitle } from '@/components/ui/item';
import { container } from '@/lib/constants.stylex';
export default function ItemSizes() {
return (
-
Extra small
-
Small
-
Medium
);
}
const styles = stylex.create({
group: {
maxWidth: container.xl,
},
});
```
## Avatar
Use `ItemMedia` to hold our `Avatar` component.
```tsx
import * as stylex from '@stylexjs/stylex';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Item, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle } from '@/components/ui/item';
import { container } from '@/lib/constants.stylex';
export default function ItemAvatar() {
return (
-
MD
madeui
Left a comment on your pull request.
);
}
const styles = stylex.create({
group: {
maxWidth: container.xl,
},
});
```
## Group
Group related items with `ItemGroup`, dividing them with `ItemSeparator`.
```tsx
import * as React from 'react';
import * as stylex from '@stylexjs/stylex';
import { Item, ItemContent, ItemDescription, ItemGroup, ItemSeparator, ItemTitle } from '@/components/ui/item';
import { container } from '@/lib/constants.stylex';
const activity = [
{ title: 'Deploy succeeded', description: 'Production · 2 minutes ago' },
{ title: 'New comment', description: 'On issue #482 · 1 hour ago' },
{ title: 'Build failed', description: 'staging branch · yesterday' },
];
export default function ItemGroupExample() {
return (
{activity.map((entry, index) => (
-
{entry.title}
{entry.description}
{index < activity.length - 1 && }
))}
);
}
const styles = stylex.create({
group: {
maxWidth: container.xl,
},
});
```
## Link
Use the `render` prop to render the item as an anchor — hover and focus states apply to the element itself.
```tsx
import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';
// The `render` prop swaps the underlying element — here an , so hover and
// focus states apply to the anchor.
export default function ItemLink() {
return (