Item
Item
A flexible, composable component for building list items with media, content, and actions.
Basic Item
A simple item with title, description, and an action button.
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
Hover to see the subtle background effect.
Outline Variant
Has a border and background on hover.
Muted Variant
Subtle background color with darker hover state.
Sizes
Two size options: Default and Small.
Default Size
Standard padding for most use cases.
Small Size
Compact padding for dense layouts.
Polymorphic Rendering (AsChild)
Items can render as different HTML elements using the AsChild parameter.
Complex Layout
Using ItemHeader and ItemFooter for advanced layouts.
TR
Task Report
Monthly summary of completed tasks and projects.
New
API Reference
Item component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Variant | ItemVariant | Default | Visual style: Default, Outline, Muted. |
| Size | ItemSize | Default | Size: Default, Sm. |
| AsChild | string? | null | Renders the item as the given HTML element (e.g. "a", "button"). |
| Href | string? | null | URL for link rendering (when AsChild="a"). |
| Class | string? | null | Additional CSS classes. |
Sub-component API
Parameters for ItemContent, ItemMedia, ItemActions, ItemHeader, and ItemFooter.
| Prop | Type | Default | Description |
|---|---|---|---|
| ItemContent — Class | string? | null | Additional CSS classes. |
| ItemMedia — Variant | ItemMediaVariant | Default | Visual style for the media area: Default, Icon, Image. |
| ItemMedia — Class | string? | null | Additional CSS classes. |
| ItemActions — Class | string? | null | Additional CSS classes. |
| ItemHeader — Class | string? | null | Additional CSS classes. |
| ItemFooter — Class | string? | null | Additional CSS classes. |