bx

Item

A composable row for lists with media, content and actions.

JD
John Doe

john@example.com

AS
Alice Smith

alice@example.com

tsx 
<Item>
  <ItemMedia><Avatar>JD</Avatar></ItemMedia>
  <ItemContent>
    <ItemTitle>John Doe</ItemTitle>
    <ItemDescription>john@example.com</ItemDescription>
  </ItemContent>
  <ItemActions><Button>Follow</Button></ItemActions>
</Item>

Item — ligne composable pour listes hétérogènes (settings, contacts, notifications, dashboard cards). Media (icône/avatar/thumb) + Content (Title + Description) + Actions (boutons, switch, badge).

Différent de Card : Item est horizontal, dense, prévu pour être empilé dans une liste. Card est en block, plus visuel.

Installation

Terminal 
$ bext ui add item

Usage

tsx 
import { Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions } from "@bext-stack/ui/primitives"

<Item>
  <ItemMedia><Avatar>JD</Avatar></ItemMedia>
  <ItemContent>
    <ItemTitle>John Doe</ItemTitle>
    <ItemDescription>john@example.com</ItemDescription>
  </ItemContent>
  <ItemActions><Button size="sm" variant="outline">Follow</Button></ItemActions>
</Item>

Anatomy

<Item>
  ├── <ItemMedia><Avatar /></ItemMedia>       // optionnel
  ├── <ItemContent>
  │   ├── <ItemTitle>John Doe</ItemTitle>
  │   └── <ItemDescription>john@example.com</ItemDescription>
  └── <ItemActions><Button /></ItemActions>   // optionnel
</Item>

API Reference

Item

Prop Type Default Description
children ReactNode — undefined

ItemMedia

Prop Type Default Description
children ReactNode — Slot gauche (avatar, icône, thumbnail).

ItemContent

Prop Type Default Description
children ReactNode — Centre — Title + Description empilés.

ItemTitle

Prop Type Default Description
children ReactNode — undefined

ItemDescription

Prop Type Default Description
children ReactNode — Muted, text-sm.

ItemActions

Prop Type Default Description
children ReactNode — Slot droit — boutons, switch, badge.

Accessibility

Wrapper le container avec role="list", chaque Item role="listitem" pour aider les AT à annoncer la longueur.

← Input OTP Kbd →