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.
Basic Item
A simple item with title and description.
Your profile has been verified.
import { IconBadgeCheck, IconChevronRight } from "~/components/icons"
import { Button } from "~/components/ui/button"
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemMedia,
ItemTitle
} from "~/components/ui/item"
export function ItemDemo() {
return (
<div class="flex w-full max-w-md flex-col gap-6">
<Item variant="outline">
<ItemContent>
<ItemTitle>Basic Item</ItemTitle>
<ItemDescription>A simple item with title and description.</ItemDescription>
</ItemContent>
<ItemActions>
<Button size="sm" variant="outline">
Action
</Button>
</ItemActions>
</Item>
<Item as="a" href="#" size="sm" variant="outline">
<ItemMedia>
<IconBadgeCheck class="size-5" />
</ItemMedia>
<ItemContent>
<ItemTitle>Your profile has been verified.</ItemTitle>
</ItemContent>
<ItemActions>
<IconChevronRight class="size-4" />
</ItemActions>
</Item>
</div>
)
}