Command Menu

Search documentation, components, and switch theme.

Atoms

Item

A list item system with media, content, and actions.

Formance
Docs

Installation#

npx shadcn@latest add @formance/item

Install the following dependencies:

npm install class-variance-authority radix-ui

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from '@/components/ui/item'
<ItemGroup>
  <Item>
    <ItemMedia variant="icon">
      <WalletIcon />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Main Wallet</ItemTitle>
      <ItemDescription>Primary wallet for transactions</ItemDescription>
    </ItemContent>
  </Item>
</ItemGroup>

Compound Components

Compose the pieces you need:

<Item />Root container with variant (default, outline, muted) and size.
<ItemMedia />Leading slot for icons or images (default, icon, image variants).
<ItemContent />Flex column for title and description.
<ItemTitle />Primary text label.
<ItemDescription />Secondary muted text, line-clamped to 2 lines.
<ItemActions />Trailing slot for action buttons.
<ItemHeader />Full-width row above the item body.
<ItemFooter />Full-width row below the item body.
<ItemGroup />Vertical list container for multiple items.
<ItemSeparator />Horizontal separator between items.