Item
Row layout for lists. Composes media, content, title, description, and action slots.
Install
Import path
Examples
Avatar
You can use ItemMedia with variant='avatar' to display an avatar.
Last seen 5 months ago
Invite your team to collaborate on this project.
Dropdown
A versatile component for displaying content with media, title, description, and actions.
Group
Use ItemGroup to group related items together.
hello@codefastlabs.com
leo@codefastlabs.com
ava@codefastlabs.com
Header
Use ItemHeader to add a header above the item content.
Everyday tasks and UI generation.
Advanced thinking or reasoning.
Open Source model for everyone.
Icon
Use ItemMedia with variant='icon' to display an icon.
New login detected from unknown device.
Image
Use ItemMedia with variant='image' to display an image.
Link
Use the asChild prop to render the item as a link. The hover and focus states will be applied to the anchor element.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
عنصر بسيط يحتوي على عنوان ووصف.
Size
Use the size prop to change the size of the item.
The standard size for most use cases.
A compact size for dense layouts.
Variant
Use the variant prop to change the visual style of the item.
Transparent background with no border.
Outlined style with a visible border.
Muted background for secondary content.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
ItemGroup, Item, ItemMedia, ItemContent,
ItemTitle, ItemDescription, ItemActions,
} from "@codefast/ui/item";
<ItemGroup>
<Item>
<ItemMedia>…</ItemMedia>
<ItemContent>
<ItemTitle>…</ItemTitle>
<ItemDescription>…</ItemDescription>
</ItemContent>
<ItemActions>…</ItemActions>
</Item>
</ItemGroup>
API reference
Props for each part of the component. All native element props are also forwarded.
Item / ItemGroup
A row layout and the container that stacks rows.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Compose ItemMedia, ItemContent, and ItemActions inside an Item. |
ItemMedia / ItemContent / ItemTitle / ItemDescription / ItemActions
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Leading media, the title + description block, and trailing actions. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- Item is presentational — give actions real buttons/links with labels.
- Use ItemSeparator between rows; it’s decorative for assistive tech.
- If a whole row is clickable, wrap it in one link rather than nesting interactives.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for settings lists, inboxes, and search results.
- Keep one primary action per row.
Don’t
- Don’t nest multiple competing actions in a row.
- Don’t use Item where a Table’s columns fit better.