Item

UsageCopy Anchor Link

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from '@vitnode/core/components/ui/item'

<Item variant="outline">
  <ItemMedia variant="icon">
    <ShieldCheck />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Two-factor authentication</ItemTitle>
    <ItemDescription>Add a second lock to your account.</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button size="sm" variant="outline">
      Enable
    </Button>
  </ItemActions>
</Item>

Every app grows a dozen "icon, text, button on the right" rows. Item is that row, built once.

• ItemContent stacks title and description and takes the free space.
• ItemTitle is one line and truncates.
• ItemDescription shows up to two muted lines. Links inside get underlined.
• ItemActions holds buttons, badges or a chevron at the end.

VariantsCopy Anchor Link

<Item variant="muted">...</Item>

SizesCopy Anchor Link

sm and xs shrink padding and gaps. Image media shrinks too, and xs also uses smaller description text.

<Item size="sm">...</Item>

MediaCopy Anchor Link

With a description present, media aligns to the top of the text.

<ItemMedia variant="image">
  <img alt="" src="/cover.webp" />
</ItemMedia>

As a linkCopy Anchor Link

Pass an element to render, such as an <a>, a router Link or a <button>. Put the row's content inside it so the link wraps everything. Links get a hover background.

<Item
  render={
    <a href="/docs/ui/avatar">
      <ItemContent>
        <ItemTitle>Read the Avatar docs</ItemTitle>
      </ItemContent>
      <ItemActions>
        <ChevronRight aria-hidden className="size-4" />
      </ItemActions>
    </a>
  }
/>

GroupsCopy Anchor Link

ItemGroup stacks items. ItemSeparator draws a line between them.

<ItemGroup aria-label="Team members">
  <Item role="listitem">...</Item>
  <ItemSeparator />
  <Item role="listitem">...</Item>
</ItemGroup>

Header and footerCopy Anchor Link

ItemHeader and ItemFooter span the full width, above or below the content.

<Item variant="outline">
  <ItemHeader>
    <Badge variant="success">Active</Badge>
  </ItemHeader>
  <ItemContent>...</ItemContent>
  <ItemFooter>
    <Button size="sm">Edit</Button>
  </ItemFooter>
</Item>

AccessibilityCopy Anchor Link

• ItemGroup has role="list". Give each Item role="listitem" and the group an aria-label.
• One interactive element per row: either the whole row is a link or button, or it holds buttons in ItemActions. Never a button inside a link.
• Icon-only buttons need an aria-label that names the row, like "Invite Ada Lovelace", not "Invite".
• Decorative icons get aria-hidden. Links that open a new tab say so in sr-only text.
• Rows rendered as links or buttons show a focus ring.

PropsCopy Anchor Link

ItemCopy Anchor Link

ItemMediaCopy Anchor Link

API ReferenceCopy Anchor Link

Base UI - useRender