Item

A versatile component for displaying content in lists, cards, or menus.

Push notifications

Send me a push notification when something happens.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/item.json

Usage

Use items to compose list rows, settings rows, and selectable media blocks.

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/item/item";
import { Button } from "@/components/button/button";

export function Example() {
  return (
    <Item variant="outline">
      <ItemMedia variant="icon">{/* icon */}</ItemMedia>
      <ItemContent>
        <ItemTitle>Title</ItemTitle>
        <ItemDescription>Supporting text for the item.</ItemDescription>
      </ItemContent>
      <ItemActions>
        <Button size="sm" variant="outline">
          Action
        </Button>
      </ItemActions>
    </Item>
  );
}

Variants: default, outline, muted. Sizes: default, sm, xs. Render as a link with render={<a href="..." />}. Group rows with ItemGroup and ItemSeparator.