Item

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

shadcn/ui docs

New comment

Someone replied to your post.

New message

You have a new direct message.

Installation

pnpm dlx shadcn@latest add https://8bit.cnlibs.com/r/item.json

Usage

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

<ItemGroup className="w-full max-w-md">
  <Item variant="outline">
    <ItemMedia variant="icon">
      <BellIcon />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>New comment</ItemTitle>
      <ItemDescription>Someone replied to your post.</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button size="sm" variant="outline">
        View
      </Button>
    </ItemActions>
  </Item>
  <ItemSeparator />
  <Item variant="outline">
    <ItemMedia variant="icon">
      <MailIcon />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>New message</ItemTitle>
      <ItemDescription>You have a new direct message.</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button size="sm" variant="outline">
        View
      </Button>
    </ItemActions>
  </Item>
</ItemGroup>