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.
Installation
npx @gentleduck/cli add item
npx @gentleduck/cli add item
Usage
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemFooter,
ItemHeader,
ItemMedia,
ItemTitle,
} from "@/components/ui/item"import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemFooter,
ItemHeader,
ItemMedia,
ItemTitle,
} from "@/components/ui/item"<Item>
<ItemHeader>Item Header</ItemHeader>
<ItemMedia />
<ItemContent>
<ItemTitle>Item</ItemTitle>
<ItemDescription>Item</ItemDescription>
</ItemContent>
<ItemActions />
<ItemFooter>Item Footer</ItemFooter>
</Item><Item>
<ItemHeader>Item Header</ItemHeader>
<ItemMedia />
<ItemContent>
<ItemTitle>Item</ItemTitle>
<ItemDescription>Item</ItemDescription>
</ItemContent>
<ItemActions />
<ItemFooter>Item Footer</ItemFooter>
</Item>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
Variants
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 default size for a standard item.
Icon
Avatar
Image
Group
Header
Link
To render an item as a link, use the asChild prop. The hover and focus states will be applied to the anchor element.
<Item asChild>
<a href="/dashboard">
<ItemMedia />
<ItemContent>
<ItemTitle>Dashboard</ItemTitle>
<ItemDescription>Overview of your account and activity.</ItemDescription>
</ItemContent>
<ItemActions />
</a>
</Item><Item asChild>
<a href="/dashboard">
<ItemMedia />
<ItemContent>
<ItemTitle>Dashboard</ItemTitle>
<ItemDescription>Overview of your account and activity.</ItemDescription>
</ItemContent>
<ItemActions />
</a>
</Item>Dropdown
API Reference
Item
The main component for displaying content with media, title, description, and actions.
- variant: The variant of the item. Use
"default"for a standard item,"outline"for an outlined item, or"muted"for a muted item. - size: The size of the item. Use
"default"for a standard size or"sm"for a smaller size. - asChild: Renders the item as a child of a custom component. The hover and focus states will be applied to the custom component.
<Item size="" variant="">
<ItemMedia />
<ItemContent>
<ItemTitle>Item</ItemTitle>
<ItemDescription>Item</ItemDescription>
</ItemContent>
<ItemActions />
</Item><Item size="" variant="">
<ItemMedia />
<ItemContent>
<ItemTitle>Item</ItemTitle>
<ItemDescription>Item</ItemDescription>
</ItemContent>
<ItemActions />
</Item>You can use the asChild 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.
import {
Item,
ItemContent,
ItemDescription,
ItemMedia,
ItemTitle,
} from "@/components/ui/item"
export function ItemLink() {
return (
<Item asChild>
<a href="/dashboard">
<ItemMedia variant="icon">
<Home />
</ItemMedia>
<ItemContent>
<ItemTitle>Dashboard</ItemTitle>
<ItemDescription>
Overview of your account and activity.
</ItemDescription>
</ItemContent>
</a>
</Item>
)
}import {
Item,
ItemContent,
ItemDescription,
ItemMedia,
ItemTitle,
} from "@/components/ui/item"
export function ItemLink() {
return (
<Item asChild>
<a href="/dashboard">
<ItemMedia variant="icon">
<Home />
</ItemMedia>
<ItemContent>
<ItemTitle>Dashboard</ItemTitle>
<ItemDescription>
Overview of your account and activity.
</ItemDescription>
</ItemContent>
</a>
</Item>
)
}ItemGroup
The ItemGroup component is a container that groups related items together with consistent styling.
<ItemGroup>
<Item />
<Item />
</ItemGroup><ItemGroup>
<Item />
<Item />
</ItemGroup>ItemSeparator
The ItemSeparator component is a separator that separates items in the item group.
<ItemGroup>
<Item />
<ItemSeparator />
<Item />
</ItemGroup><ItemGroup>
<Item />
<ItemSeparator />
<Item />
</ItemGroup>ItemMedia
Use the ItemMedia component to display media content such as icons, images, or avatars.
- variant: The variant of the media content. Use
"default"for a default icon or image,"icon"for an icon, or"image"for an image.
<ItemMedia variant="icon">
<Icon />
</ItemMedia><ItemMedia variant="icon">
<Icon />
</ItemMedia><ItemMedia variant="image">
<img src="..." alt="..." />
</ItemMedia><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.
<ItemContent>
<ItemTitle>Item</ItemTitle>
<ItemDescription>Item</ItemDescription>
</ItemContent><ItemContent>
<ItemTitle>Item</ItemTitle>
<ItemDescription>Item</ItemDescription>
</ItemContent>ItemTitle
Use the ItemTitle component to display the title of the item.
<ItemTitle>Item Title</ItemTitle><ItemTitle>Item Title</ItemTitle>ItemDescription
Use the ItemDescription component to display the description of the item.
<ItemDescription>Item description</ItemDescription><ItemDescription>Item description</ItemDescription>ItemActions
Use the ItemActions component to display action buttons or other interactive elements.
<ItemActions>
<Button>Action</Button>
<Button>Action</Button>
</ItemActions><ItemActions>
<Button>Action</Button>
<Button>Action</Button>
</ItemActions>ItemHeader
Use the ItemHeader component to display a header in the item.
<ItemHeader>Item Header</ItemHeader><ItemHeader>Item Header</ItemHeader>ItemFooter
Use the ItemFooter component to display a footer in the item.
<ItemFooter>Item Footer</ItemFooter><ItemFooter>Item Footer</ItemFooter>
