ComponentsData display

Item

The generic row of a non-tabular list: leading visual, title and description, meta and actions. Recent posts, contacts in a side panel, notifications, search results. Hover-revealed actions stay reachable on focus and touch; with selectable the list becomes a keyboard listbox.

Radix Slot components/item.tsx, lib/data-islands.tsxtheme · material · accent · density · font

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Item, ItemContent, ItemDescription, ItemList, ItemMeta, ItemTitle } from "@vamos-ui/react";

<ItemList>
  <Item>
    <ItemContent>
      <ItemTitle>Local SEO checklist for 2026</ItemTitle>
      <ItemDescription>Samet · Edited yesterday</ItemDescription>
    </ItemContent>
    <ItemMeta>Draft</ItemMeta>
  </Item>
</ItemList>

Examples

Leading visuals

Avatar, icon tile (variant="icon"), thumbnail (variant="thumbnail") or a checkbox.

Ayşe Kaya
Head of Sales · Northwind Traders
Avatar
Invoice INV-2041 paid
$10,720.00 · Kadıköy Bistro
Icon
terrace-dinner-hero.jpg
2400 × 1600 · 412 KB
Thumbnail
Cookie policy
Legal page · updated Oct 2
Checkbox

Hover actions (CRM)

reveal="hover" hides actions until hover — they still show on focus-within and always on touch screens.

Contacts

Actions appear on hover, on focus and always on touch screens.

Ayşe Kaya
Head of Sales · Northwind Traders
Burak Şen
Owner · Kadıköy Bistro
İlker Şahin
Marketing lead · Moda Wellness

Selectable list (HR)

selectable="single" | "multiple": listbox with ↑ ↓ Home End, Space/Enter toggles, Shift+↓ extends, Ctrl/⌘+A selects all. Disabled rows are skipped.

Assign reviewers

1 selected · ↑ ↓ to move, Space to toggle

Rows as links (search)

asChild merges the row styles onto your Link. Keep actions out of link rows (one interactive element).

Local SEO checklist for 2026
Posts · Draft
Moda Wellness
Clients · 3 open deals
/blog/local-seo-2026
Redirects · 301 to /guides/local-seo

Loading and empty

ItemSkeleton for loading rows; ItemList empty for the no-rows message.

Upcoming birthdays

Empty

No birthdays in the next 30 days.

API

ItemList

Prop	Type	Default
`divided` Hairlines between rows.	`boolean`	`true`
`inset` Small side padding and rounded hover — for a list inside a padded CardBody.	`boolean`	`false`
`selectable` Listbox behaviour; Item children need a value.	`"single" \| "multiple"`	`—`
`value / defaultValue` Selected values (controlled / uncontrolled).	`string[]`	`—`
`onValueChange` Selection change.	`(value: string[]) => void`	`—`
`as` List element.	`"ul" \| "ol" \| "div"`	`"ul"`
`empty` Shown when there are no children.	`ReactNode`	`—`

Item

Prop	Type	Default
`value` Option value in a selectable list.	`string`	`—`
`size` Row height from --row-h (−0.5rem / base / +1rem).	`"sm" \| "md" \| "lg"`	`"md"`
`align` Vertical alignment of the parts.	`"center" \| "start"`	`"center"`
`interactive` Hover tint and pointer (default on for asChild and options).	`boolean`	`—`
`disabled` Dimmed, aria-disabled, skipped by the keyboard.	`boolean`	`false`
`asChild` Merge the row onto the child (a link).	`boolean`	`false`
`as` Row wrapper element.	`"li" \| "div"`	`"li"`

ItemLeading

Prop	Type	Default
`variant` Icon tile or 56×40 thumbnail frame.	`"plain" \| "icon" \| "thumbnail"`	`"plain"`

ItemTitle

Prop	Type	Default
`truncate` One line; string titles get a title tooltip.	`boolean`	`true`
`asChild` Render as a heading or link.	`boolean`	`false`

ItemActions

Prop	Type	Default
`reveal` hover: visible on hover, focus-within and touch.	`"always" \| "hover"`	`"always"`

ItemSkeleton

Prop	Type	Default
`count` Placeholder rows.	`number`	`3`
`leading` Include an avatar circle.	`boolean`	`true`

ItemContent / ItemDescription / ItemMeta

Prop	Type	Default
`...props` Layout parts.	`HTMLAttributes`	`—`

Input & Field

Kanban