Item
@/components/kamod-ui/item
A simple item with title and description.
Installation
Import Item and subcomponents (ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemGroup, …) from `@/components/kamod-ui/item`.
pnpm add @kamod-ch/uiUsage
Use variant (default, outline, muted) and size (default, sm, xs). Use asChild to render a link or other host with item styles. Prefer Field when the row wraps a form control (input, checkbox, select); use Item for read-only rows, lists, and actions.
import { Item } from "@/components/kamod-ui/item";<Item />Basic patterns
Outline items with actions, and a compact row rendered as a link via asChild.
Usage
Standard layout: icon media, title + description, and an action — matches the shadcn usage snippet.
Description
Variants
Default is transparent; outline adds a border; muted uses a soft background.
Transparent background with no border.
Outlined style with a visible border.
Muted background for secondary content.
Sizes
Use size sm or xs for denser stacks; padding and gaps scale down.
The standard size for most use cases.
A compact size for dense layouts.
The most compact size available.
Icon media
ItemMedia variant icon wraps the glyph in a muted tile with consistent dimensions.
New login detected from unknown device.
Avatar media
Use the default ItemMedia variant to pass through Avatar or custom stacks.
ERLast seen 5 months ago
ERInvite your team to collaborate on this project.
Image media
variant image clamps cover artwork; pair with ItemGroup and asChild links for lists.
Group
ItemGroup uses role list; stack outline rows with optional separators.
sshadcn@vercel.com
mmaxleiter@vercel.com
eevilrabbit@vercel.com
Header and footer
ItemHeader spans the full row width above content; ItemFooter does the same below.
Everyday tasks and UI generation.
Advanced thinking or reasoning.
Open source model for everyone.
Shared access for your team projects.
Link (asChild)
Hover and focus rings apply to the anchor when Item uses asChild.
Separator
ItemSeparator renders a horizontal rule tuned for stacked ItemGroup layouts.
Inside dropdown
Extra-small items fit menu rows; keep Item width full inside DropdownItem.
API Reference
Props, slots and variants for this component.
Item
Item component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| Item variant | "default" | "outline" | "muted" | "default" |
| Item size | "default" | "sm" | "xs" | "default" |
| Item asChild | boolean | false |
| ItemMedia variant | "default" | "icon" | "image" | "default" |
| ItemGroup | container (role=list) | — |
| ItemSeparator | horizontal Separator | — |
| ItemContent / ItemTitle / ItemDescription / ItemActions | layout slots | optional |
| ItemHeader / ItemFooter | full-width rows | optional |
Accessibility Notes
ItemGroup exposes role=list; use listitem on interactive rows when appropriate. Keep ItemTitle text meaningful; for icon-only actions set aria-label on controls.