List

Examples

Settings rows

Two-factor authentication

Add a second step when signing in.

Configure

Active sessions

3 devices.

Manage

Vanilla CSS

<div class="item-group item-group-bordered">
  <div class="item">
    <div class="item-content">
      <div class="item-title">Two-factor authentication</div>
      <div class="item-description">Add a second step when signing in.</div>
    </div>
    <div class="item-actions">
      <button class="btn btn-sm" type="button">Configure</button>
    </div>
  </div>
  <div class="item">
    <div class="item-content">
      <div class="item-title">Active sessions</div>
      <div class="item-description">3 devices.</div>
    </div>
    <div class="item-actions">
      <button class="btn btn-sm" type="button">Manage</button>
    </div>
  </div>
</div>

React

<ItemGroup bordered>
  <Item
    title="Two-factor authentication"
    description="Add a second step when signing in."
    actions={<Button size="sm">Configure</Button>}
  />
  <Item
    title="Active sessions"
    description="3 devices."
    actions={<Button size="sm">Manage</Button>}
  />
</ItemGroup>

With media

AL

Ada Lovelace

Admin · ada@example.com

Active

GH

Grace Hopper

Editor · grace@example.com

Invited

Vanilla CSS

<div class="item-group">
  <div class="item">
    <div class="item-media"><span class="avatar avatar-sm">AL</span></div>
    <div class="item-content">
      <div class="item-title">Ada Lovelace</div>
      <div class="item-description">Admin · ada@example.com</div>
    </div>
    <div class="item-actions">
      <span class="badge badge-success badge-soft">Active</span>
    </div>
  </div>
  <div class="item">
    <div class="item-media"><span class="avatar avatar-sm">GH</span></div>
    <div class="item-content">
      <div class="item-title">Grace Hopper</div>
      <div class="item-description">Editor · grace@example.com</div>
    </div>
    <div class="item-actions">
      <span class="badge badge-soft">Invited</span>
    </div>
  </div>
</div>

React

<ItemGroup>
  <Item
    media={<Avatar initials="AL" size="sm" />}
    title="Ada Lovelace"
    description="Admin · ada@example.com"
    actions={
      <Badge variant="success" soft>
        Active
      </Badge>
    }
  />
  <Item
    media={<Avatar initials="GH" size="sm" />}
    title="Grace Hopper"
    description="Editor · grace@example.com"
    actions={<Badge soft>Invited</Badge>}
  />
</ItemGroup>

Whole-row link

Ada Lovelace

ada@example.com

Vanilla CSS

<div class="item-group item-group-bordered">
  <div class="item item-link">
    <div class="item-content">
      <div class="item-title"><a href="#ada">Ada Lovelace</a></div>
      <div class="item-description">ada@example.com</div>
    </div>
    <div class="item-actions">
      <button class="btn btn-sm btn-ghost" type="button" aria-label="More">
        <i class="ti ti-dots" aria-hidden="true"></i>
      </button>
    </div>
  </div>
</div>

React

<ItemGroup bordered>
  <Item
    asLink
    title={<a href="#ada">Ada Lovelace</a>}
    description="ada@example.com"
    actions={
      <Button size="sm" variant="ghost" icon={IconDots} aria-label="More" />
    }
  />
</ItemGroup>

Sizes

Small

Medium

Large

Vanilla CSS

<div class="item-group item-group-bordered">
  <div class="item item-sm">
    <div class="item-content"><div class="item-title">Small</div></div>
  </div>
  <div class="item">
    <div class="item-content"><div class="item-title">Medium</div></div>
  </div>
  <div class="item item-lg">
    <div class="item-content"><div class="item-title">Large</div></div>
  </div>
</div>

React

<ItemGroup bordered>
  <Item size="sm" title="Small" />
  <Item title="Medium" />
  <Item size="lg" title="Large" />
</ItemGroup>

Reference

React

Part	Renders	Class
Item	<div>	item
Item.Container	<div>	item
Item.Media	<div>	item-media
Item.Content	<div>	item-content
Item.Title	<div>	item-title
Item.Description	<div>	item-description
Item.Actions	<div>	item-actions
ItemGroup	<div>	item-group

Part	Prop	Type	Default
Item	variant	"default" | "outline" | "muted"	"default"
Item	size	"sm" | "md" | "lg"	"md"
Item	asLink	boolean	false
Item	media	ReactNode	—
Item	icon	IconProp	—
Item	title	ReactNode	—
Item	description	ReactNode	—
Item	actions	ReactNode	—
Item	classNames	slots	—
ItemGroup	bordered	boolean	false

media and icon share the leading slot and media wins. classNames covers media, content, title, description, actions. Children render between the content and the actions.

variant, size and asLink live on the row, so they work on both Item and Item.Container. asLink styles the row and expands the first nested link, but you supply the <a>: put it in the title. ItemGroup is a standalone export, not Item.Group.

Vanilla

Class	Effect
item	Flex row, 0.75rem gap, 0.75rem/0.5rem padding, text-sm
item-media	Leading slot, muted, never shrinks; a child <i>/<svg> renders at 1.25rem
item-content	Text column, 0.125rem gap, takes the remaining width and may shrink so long values wrap
item-title	Primary line: medium weight, tight leading
item-description	Secondary line: muted, snug leading
item-actions	Trailing slot pushed to the row end, 0.5rem gap, own stacking context so it survives item-link
item-outline	1px border, 0.5rem radius
item-muted	Muted surface, 0.5rem radius
item-sm	0.5rem gap, 0.5rem/0.375rem padding, text-xs
item-lg	1rem gap, 1rem/0.75rem padding, text-base
item-group	Vertical stack that divides its direct item children with a bottom border
item-group-bordered	Wraps the stack in a 1px border and 0.5rem radius, clipping the corners
item-link	Expands the row’s first <a> over the whole row via ::after, tints on hover, rings on :focus-within

There is no item-md or item-default — both are the unmodified item.

For tabular data with columns use a Table; for a self-contained panel, a Card.