Item
A flexible, composable component for building list items, settings rows, and navigation entries with support for media, titles, descriptions, and trailing actions.
Default
The default
Item component renders with ItemContent containing a ItemTitle and ItemDescription. This is the simplest form, suitable for settings lists or information rows where no media or actions are needed.With Media
Use
ItemMedia to add an avatar, icon, or image alongside the item content. The media slot is positioned to the left and vertically centered, making it ideal for user lists with profile pictures or settings with descriptive icons.With Actions
Use
ItemActions to add action buttons or interactive controls positioned on the right side of the item. The actions slot is flex-aligned to the center, keeping buttons vertically centered regardless of the content height.Variants
Use the
Variant parameter to change the visual style. Choose from Default (no background or border), Outline (with border and background), and Muted (subtle muted background).Sizes
Control the item dimensions with the
Size parameter. Available sizes are Default (standard padding) and Sm (compact spacing for dense lists). The compact size reduces vertical padding while maintaining the same horizontal layout.Custom Variant
Use the
Class parameter to apply custom Tailwind classes to the item container. Override the border colour, add a left accent border, apply a gradient background, or change the border radius to match your design system.As Clickable
Set
AsChild to "button" or "a" to render the item as a clickable element with polymorphic rendering. Interactive items automatically receive hover state transitions and cursor changes, making them suitable for navigation menus or clickable list entries.Item Group
Use
ItemGroup to group related items together with ItemSeparator dividers between them. The group renders with role="list" for semantic structure, making it accessible to screen readers as a related collection of items.