Yami

Item

Display content with media, title, description, and actions.

Jane Cooper

jane@yami.ui.unsanity.ai

Installation

Add the item component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/item.json

Usage

import { UserIcon } from "lucide-react"

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

<Item variant="outline" className="w-80">
  <ItemMedia variant="icon">
    <UserIcon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Jane Cooper</ItemTitle>
    <ItemDescription>jane@yami.ui.unsanity.ai</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button size="sm" variant="outline">View</Button>
  </ItemActions>
</Item>

Examples

Variants

default / outline / muted
default

Item variant default.

outline

Item variant outline.

muted

Item variant muted.

Code

import { BellIcon } from "lucide-react"

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

<div className="flex w-80 flex-col gap-2">
  <Item variant="default">
    <ItemMedia variant="icon"><BellIcon /></ItemMedia>
    <ItemContent>
      <ItemTitle>Default</ItemTitle>
      <ItemDescription>Item variant default.</ItemDescription>
    </ItemContent>
  </Item>
  {/* outline, muted ... */}
</div>

Item Group

ItemGroup + ItemSeparator
Inbox
Drafts

Code

import { ChevronRightIcon } from "lucide-react"

import {
  Item,
  ItemActions,
  ItemContent,
  ItemGroup,
  ItemSeparator,
  ItemTitle,
} from "@/components/ui/item"

<ItemGroup className="w-80 border border-border">
  <Item>
    <ItemContent><ItemTitle>Inbox</ItemTitle></ItemContent>
    <ItemActions><ChevronRightIcon className="size-4 text-muted-foreground" /></ItemActions>
  </Item>
  <ItemSeparator />
  <Item>
    <ItemContent><ItemTitle>Drafts</ItemTitle></ItemContent>
    <ItemActions><ChevronRightIcon className="size-4 text-muted-foreground" /></ItemActions>
  </Item>
</ItemGroup>

With header

ItemHeader spans the row
ProjectActive
Yami UI

A component registry.

Code

import { LayoutDashboardIcon } from "lucide-react"

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

<Item variant="outline" className="w-80">
  <ItemHeader>
    <span className="label text-muted-foreground">Project</span>
    <span className="label text-yami-primary">Active</span>
  </ItemHeader>
  <ItemMedia variant="icon"><LayoutDashboardIcon /></ItemMedia>
  <ItemContent>
    <ItemTitle>Yami UI</ItemTitle>
    <ItemDescription>A component registry.</ItemDescription>
  </ItemContent>
</Item>