Item
A row of content with a media slot, a title and description, and actions, alone or in a list.
An item lays out one row of content: an icon or image, a title with a description, and actions at the end. Use it for settings, documents, notifications, people, anywhere a list is made of rich rows. It is only layout: what the row means and what its actions do are yours. This site uses items for the previous and next links below every page.
A code from your phone is asked at every sign-in.
Three new since your last visit
PDF · 1.2 MB
PDF · 3.4 MB
// apps/docs/examples/ui/item.tsx'use client';
import {ChevronRightIcon, FileTextIcon, ShieldCheckIcon} from 'lucide-react';
import {Badge} from '@workspace/active-ui/components/primitives/badge';import {Button} from '@workspace/active-ui/components/primitives/button';import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemSeparator, ItemTitle,} from '@workspace/active-ui/components/primitives/item';
const DOCUMENTS = [ {title: 'Scheme rules 2026', meta: 'PDF · 1.2 MB'}, {title: 'Annual report 2025', meta: 'PDF · 3.4 MB'},];
/** * A row of content with a media slot, a title and description, and * actions: as a standalone outlined item, as a link, and as a list of * items with separators. In a group, which is a list, each item is a * `listitem`. Items lay out the content; the actions are yours. */export default function ItemExample() { return ( <div className="flex w-full max-w-md flex-col gap-6"> <Item variant="outline"> <ItemMedia variant="icon"> <ShieldCheckIcon aria-hidden /> </ItemMedia> <ItemContent> <ItemTitle> Two-step verification <Badge variant="secondary">On</Badge> </ItemTitle> <ItemDescription> A code from your phone is asked at every sign-in. </ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Manage </Button> </ItemActions> </Item>
<Item variant="muted" size="sm" render={<a href="#item-statements" />}> <ItemContent> <ItemTitle>Statements</ItemTitle> <ItemDescription>Three new since your last visit</ItemDescription> </ItemContent> <ItemActions> <ChevronRightIcon aria-hidden className="size-4" /> </ItemActions> </Item>
<ItemGroup> {DOCUMENTS.map((document, index) => ( <div key={document.title} className="contents"> {index > 0 ? <ItemSeparator /> : null} <Item size="sm" role="listitem"> <ItemMedia variant="icon"> <FileTextIcon aria-hidden /> </ItemMedia> <ItemContent> <ItemTitle>{document.title}</ItemTitle> <ItemDescription>{document.meta}</ItemDescription> </ItemContent> <ItemActions> <Button variant="ghost" size="sm"> Download </Button> </ItemActions> </Item> </div> ))} </ItemGroup> </div> );}Usage#
import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle,} from '@workspace/active-ui/components/primitives/item';
<Item variant="outline"> <ItemMedia variant="icon"> <ShieldCheckIcon aria-hidden /> </ItemMedia> <ItemContent> <ItemTitle>Two-step verification</ItemTitle> <ItemDescription> A code from your phone is asked at every sign-in. </ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Manage </Button> </ItemActions></Item>;Anatomy#
Item: the row.variant:default(no frame),outline(a border) ormuted(a light fill);size:default,smorxs.rendermakes it another element, such as a link (render={<a href="…" /), with a hover state.>} Item: the start of the row.Media variant:default,icon(sizes an icon) orimage(a square crop).ItemwithContent ItemandTitle Item(clamped to two lines).Description Item: the end of the row.Actions ItemandHeader Item: full-width rows above and below the content.Footer ItemandGroup Item: a list of items,Separator role="list", and a line between them.
What your application provides#
The content and the actions. When the whole item is a link, keep the actions out of it: a button inside a link cannot be reached on its own.
Structure for a list:
Itemis aGroup role="list"; give each itemrole="listitem"when the list semantics matter, or use your own<ul>.
Accessibility#
Items are <div>s with no behaviour; a linked item is an ordinary link. The description is part
of the link's name when the item is a link, so keep it short.
API#
Item#
Import from @workspace/
Props marked Base UI are behaviour of the Base UI part this component is built on.
Props
- Type
"default""sm""xs"null- Default
'default'
The padding and gap: default, sm or xs.
- Type
"default""muted""outline"null- Default
'default'
default has no frame, outline a border, muted a light fill.
- Type
ComponentRender Fn<HTMLProps, {}> ReactElement<…>
Allows you to replace the component's HTML element with a different tag, or compose it with another component.
Accepts a React or a function that returns the element to render.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
Other parts#
ItemMedia
Props
- Type
"default""icon""image"null- Default
'default'
default as is, icon sizes an icon, image crops a picture to a square.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
ItemSeparator
All props come from the Base UI part this component is built on.
Props
- Type
Orientation- Default
'horizontal'
The orientation of the separator.
- Type
ComponentRender Fn<…> ReactElement<…>
Allows you to replace the component's HTML element with a different tag, or compose it with another component.
Accepts a React or a function that returns the element to render.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
Parts that take only their element’s attributes
Item: the attributes of aContent <div>, with className and ref.Item: the attributes of aActions <div>, with className and ref.Item: the attributes of aGroup <div>, with className and ref.Item: the attributes of aTitle <div>, with className and ref.Item: the attributes of aDescription <p>, with className and ref.Item: the attributes of aHeader <div>, with className and ref.
This page adapts the Item documentation of shadcn/ui (MIT licence) to this package; see Third-party notices.