@usevyre/react @usevyre/vue

Item

A composable layout primitive for list rows, settings rows, and notification rows. Denser than Card — reach for Item whenever you render a repeated row with a leading media slot, a title/description column, and trailing actions.

Basic

Compose a row from ItemMedia (icon / avatar), ItemContent (with ItemTitle and ItemDescription), and ItemActions (pinned to the right via margin-left: auto). Every slot is optional except ItemContent.

Notifications

Receive an email when someone mentions you.

 
import { Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, Switch } from "@usevyre/react";

<Item>
  <ItemMedia><GearIcon /></ItemMedia>
  <ItemContent>
    <ItemTitle>Notifications</ItemTitle>
    <ItemDescription>Receive an email when someone mentions you.</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Switch defaultChecked />
  </ItemActions>
</Item>

Grouped list

Wrap rows in ItemGroup with separated to render a bordered list with dividers between rows. Add clickable to each Item for keyboard-focusable, hoverable rows (role="button").

Olivia Martin

olivia@usevyre.com

Owner
Jackson Lee

jackson@usevyre.com

Editor
Isabella Nguyen

bella@usevyre.com

Viewer
 
import { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, Avatar, Tag } from "@usevyre/react";

<ItemGroup separated>
  {members.map((m) => (
    <Item key={m.email} clickable>
      <ItemMedia><Avatar fallback={m.initials} size="sm" /></ItemMedia>
      <ItemContent>
        <ItemTitle>{m.name}</ItemTitle>
        <ItemDescription>{m.email}</ItemDescription>
      </ItemContent>
      <ItemActions><Tag>{m.role}</Tag></ItemActions>
    </Item>
  ))}
</ItemGroup>

Variants

default sits on the surface, outlined adds a subtle border, muted uses a raised background to de-emphasise the row, and plain is transparent with no border — use it when composing Item inside another surface (a Card, a Kanban card, a list) so you don't get a double background.

Default

Plain surface row.

Outlined

Bordered row.

Muted

Raised muted background.

Plain (inside a Card)

Transparent — no double background.

 
<Item variant="default">…</Item>
<Item variant="outlined">…</Item>
<Item variant="muted">…</Item>
<Item variant="plain">…</Item>   {/* transparent — compose inside Card etc. */}

Item props

Props

Prop Type Default Description
variant "default" | "outlined" | "muted" | "plain" "default" Visual style of the row. plain = transparent + no border — use when composing Item inside another surface (Card, Kanban card) to avoid a double background.
size "sm" | "md" | "lg" "md" Vertical density and text size of the row.
clickable boolean false Adds pointer cursor, hover background, focus ring, and role="button".
className string — Additional CSS class.

ItemGroup props

Props

Prop Type Default Description
separated boolean false Adds dividers between items and rounds the outer corners — turns loose rows into a bordered list.
className string — Additional CSS class.
← Input Label →