Item Component

A flexible, composable component for building list items with media, content, and actions.

Basic Item

A simple item with title and description.

Basic Item
A simple item with title and description.

Notification List

Items displaying notifications with icons, titles, descriptions, and timestamps.

Successfully saved
Your changes have been saved to the database.
2m ago
New update available
Version 2.0 is now available for download.
1h ago
Warning: Storage limit
You're approaching your storage limit. Consider upgrading your plan.
3h ago
Error: Failed to sync
Could not sync your data. Please check your connection.
1d ago

Settings Items

Clickable settings rows with icons and descriptions using AsChild to render as links.

User Profile Cards

User items with avatars, names, roles, and action buttons.

JD
John Doe
Admin
john.doe@example.com
SM
Sarah Miller
Editor
sarah.miller@example.com
MJ
Mike Johnson
Viewer
mike.johnson@example.com

Variants

Three visual variants: default, outline, and muted.

Default Variant

Default Item
Hover to see the subtle background effect.

Outline Variant

Outline Item
Has a border and background on hover.

Muted Variant

Muted Item
Subtle background color with darker hover state.

Sizes

Two size options: default and small.

Default Size

Default Size
Standard padding for most use cases.

Small Size

Small Size
Compact padding for dense layouts.

Polymorphic Rendering (AsChild)

Items can render as different HTML elements using the AsChild parameter.

As Button

Complex Layout

Using ItemHeader and ItemFooter for advanced layouts.

TR
Task Report
Monthly summary of completed tasks and projects.
New
Generated today
An unhandled error has occurred. Reload 🗙