Item
A versatile component for displaying content with media, title, description, and actions.
A simple item with title and description.
The Item component is a flexible container for presenting a title, description, and actions. Use
ItemGroup to render a list of related items.
Usage
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemMedia,
ItemTitle,
} from "@tulip-systems/core/components";<Item>
<ItemMedia variant="icon">
<InboxIcon />
</ItemMedia>
<ItemContent>
<ItemTitle>Title</ItemTitle>
<ItemDescription>Description</ItemDescription>
</ItemContent>
<ItemActions>
<Button>Action</Button>
</ItemActions>
</Item>Item vs Field
Use Field for form inputs (checkbox, input, radio, select). Use Item for static content with
title, description, and actions.
Variant
Transparent background with no border.
Outlined style with a visible border.
Muted background for secondary content.
Size
The standard size for most use cases.
A compact size for dense layouts.
Examples
Icon
New login detected from unknown device.
Avatar
Last seen 5 months ago
Invite your team to collaborate on this project.
Image
Group
shadcn@vercel.com
maxleiter@vercel.com
evilrabbit@vercel.com
Header
Everyday tasks and UI generation.
Advanced thinking or reasoning.
Open Source model for everyone.