Item

Composable list item components with media, content, and actions.

shadcn/ui docs →

Preview

Design System

A collection of reusable components.

Documentation

Guides and API references.

Templates

Ready-to-use starter templates.

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/item.json

Dependencies: @radix-ui/react-slot

Usage

example.tsx
import {
  Item,
  ItemGroup,
  ItemContent,
  ItemTitle,
  ItemDescription,
  ItemMedia,
  ItemActions,
  ItemSeparator,
} from "@/components/ui/item"
import { Button } from "@/components/ui/button"
import { FileText } from "lucide-react"

<ItemGroup className="border-2 border-border rounded-base">
  <Item>
    <ItemMedia variant="icon">
      <FileText />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Getting Started</ItemTitle>
      <ItemDescription>Learn how to set up the project.</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button size="sm" variant="neutral">View</Button>
    </ItemActions>
  </Item>
  <ItemSeparator />
  <Item>
    <ItemContent>
      <ItemTitle>Components</ItemTitle>
      <ItemDescription>Browse the component library.</ItemDescription>
    </ItemContent>
  </Item>
</ItemGroup>
0