Item
A versatile component for displaying content with media, title, description, and actions.
A simple item with title and description.
Usage
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemMedia,
ItemTitle,
} from "uilab-core"<Item>
<ItemMedia variant="icon">
<Icon />
</ItemMedia>
<ItemContent>
<ItemTitle>Title</ItemTitle>
<ItemDescription>Description</ItemDescription>
</ItemContent>
<ItemActions>
<Button>Action</Button>
</ItemActions>
</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
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.
Sizes
Use the size prop to change the size of the item. Available sizes are default, sm, and xs.
The standard size for most use cases.
A compact size for dense layouts.
Icon
Use ItemMedia with variant="icon" to display an icon.
New login detected from unknown device.
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.
Image
Use ItemMedia with variant="image" to display an image.
Group
Use ItemGroup to group related items together.
shadcn@vercel.com
maxleiter@vercel.com
evilrabbit@vercel.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.
Link
Use the render prop to render the item as a link. The hover and focus states will be applied to the anchor element.