Item

Item component for displaying structured list items with media, content, and actions. Composed of multiple sub-components for flexible layouts.

1. Import

Import the item components from the design system.

import {
  Item,
  ItemMedia,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemActions,
  ItemGroup,
  ItemSeparator,
} from "@/design-system/components/ui/item"

2. Props

Item component sub-components and their props.

Item

Prop	Type	Default
variant	"default" \| "outline" \| "muted"	"default"
size	"default" \| "sm" \| "xs"	"default"
className	string	--

ItemMedia

Prop	Type	Default
variant	"default" \| "icon" \| "image"	"default"
className	string	--

3. Usages

Common item patterns and configurations.

Email Notifications

Receive emails about your account activity

Push Notifications

Receive push notifications on your device

Active

import {
  Item,
  ItemMedia,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemActions,
  ItemGroup,
} from "@/design-system/components/ui/item";
import { Button } from "@/design-system/components/ui/button";
import { Badge } from "@/design-system/components/ui/badge";
import { MailIcon, BellIcon, SettingsIcon } from "lucide-react";

export function Example() {
  return (
    <ItemGroup>
      <Item>
        <ItemMedia variant="icon">
          <MailIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Email Notifications</ItemTitle>
          <ItemDescription>Receive emails about your account activity</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button size="icon-xs" variant="ghost">
            <SettingsIcon />
          </Button>
        </ItemActions>
      </Item>
      <Item>
        <ItemMedia variant="icon">
          <BellIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Push Notifications</ItemTitle>
          <ItemDescription>Receive push notifications on your device</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Badge>Active</Badge>
        </ItemActions>
      </Item>
    </ItemGroup>
  );
}