Item

TSX
"use client";

import { BadgeCheckIcon } from "lucide-react";

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

export default function ItemDemo() {
  return (
    <Item variant="outline" className="max-w-md">
      <ItemMedia variant="icon">
        <BadgeCheckIcon />
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Your profile is verified</ItemTitle>
        <ItemDescription>
          Verification adds a badge next to your name on your public profile.
        </ItemDescription>
      </ItemContent>
      <ItemActions>
        <Button size="sm" variant="outline">
          View
        </Button>
      </ItemActions>
    </Item>
  );
}

TSX
"use client";

import { BellIcon } from "lucide-react";

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

const variants = ["default", "outline", "muted"] as const;

export default function ItemVariants() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      {variants.map((variant) => (
        <Item key={variant} variant={variant}>
          <ItemMedia variant="icon">
            <BellIcon />
          </ItemMedia>
          <ItemContent>
            <ItemTitle className="capitalize">{variant}</ItemTitle>
            <ItemDescription>
              The {variant} variant of the item component.
            </ItemDescription>
          </ItemContent>
        </Item>
      ))}
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import { ChevronRightIcon } from "lucide-react";

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from "@/components/ui/item";

const members = [
  { name: "Emma Clark", role: "Design engineer", initials: "EC" },
  { name: "Jordan Lee", role: "Frontend developer", initials: "JL" },
  { name: "Sam Rivera", role: "Product manager", initials: "SR" },
];

export default function ItemGroupDemo() {
  return (
    <ItemGroup className="max-w-md gap-0 overflow-hidden rounded-lg border">
      {members.map((member, index) => (
        <React.Fragment key={member.name}>
          {index > 0 && <ItemSeparator className="my-0" />}
          <Item
            size="sm"
            className="rounded-none"
            render={<a href="#members" aria-label={member.name} />}
          >
            <ItemMedia>
              <Avatar className="size-8">
                <AvatarFallback>{member.initials}</AvatarFallback>
              </Avatar>
            </ItemMedia>
            <ItemContent>
              <ItemTitle>{member.name}</ItemTitle>
              <ItemDescription>{member.role}</ItemDescription>
            </ItemContent>
            <ChevronRightIcon className="size-4 text-muted-foreground" />
          </Item>
        </React.Fragment>
      ))}
    </ItemGroup>
  );
}