Embossed UI

Search documentation

Search for a page or component.

Item

A versatile component that you can use to display any content.

Two-factor authentication

Ask for a code from your phone when you sign in.

Tool permissions

Let Marketer read and update your storefront theme.

Products synced
1,284
import { PackageIcon, ShieldCheckIcon } from "lucide-react"

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

export function ItemDemo() {
  return (
    <ItemGroup className="max-w-md">
      <Item variant="outline">
        <ItemMedia variant="icon">
          <ShieldCheckIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Two-factor authentication</ItemTitle>
          <ItemDescription>
            Ask for a code from your phone when you sign in.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button size="sm" variant="secondary">
            Enable
          </Button>
        </ItemActions>
      </Item>
      <Item variant="muted">
        <ItemContent>
          <ItemTitle>Tool permissions</ItemTitle>
          <ItemDescription>
            Let Marketer read and update your storefront theme.
          </ItemDescription>
        </ItemContent>
      </Item>
      <Item>
        <ItemMedia variant="icon">
          <PackageIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Products synced</ItemTitle>
        </ItemContent>
        <ItemActions>
          <span className="text-muted-foreground">1,284</span>
        </ItemActions>
      </Item>
    </ItemGroup>
  )
}

Installation

pnpm dlx shadcn@latest add https://ui.ikramhasan.com/r/item.json

Usage

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"
<Item>
  <ItemMedia variant="icon">
    <Icon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Title</ItemTitle>
    <ItemDescription>Description</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button>Action</Button>
  </ItemActions>
</Item>

Examples

App list

S
Shopify

Products, orders and customers from your store.

Connected
M
Meta Ads

Facebook and Instagram campaigns, creatives and audiences.

import { PlusIcon } from "lucide-react"

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

export function ItemAppList() {
  return (
    <ItemGroup className="max-w-md">
      <Item>
        <ItemMedia variant="image">
          <Tile letter="S" className="bg-[#5e8e3e]" />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Shopify</ItemTitle>
          <ItemDescription>
            Products, orders and customers from your store.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Badge className="bg-success/15 text-success">Connected</Badge>
        </ItemActions>
      </Item>
      <Item>
        <ItemMedia variant="image">
          <Tile letter="M" className="bg-[#1877f2]" />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Meta Ads</ItemTitle>
          <ItemDescription>
            Facebook and Instagram campaigns, creatives and audiences.
          </ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button size="icon" variant="secondary" aria-label="Connect Meta Ads">
            <PlusIcon />
          </Button>
        </ItemActions>
      </Item>
    </ItemGroup>
  )
}

// Partner apps show their own logo in a tile. These stand in for logos.
function Tile({ letter, className }: { letter: string; className: string }) {
  return (
    <div
      className={`flex size-full items-center justify-center text-sm font-semibold text-white ${className}`}
    >
      {letter}
    </div>
  )
}

Store list (links, separators)

Acme Store
Acme Outlet
import { ChevronRightIcon, StoreIcon } from "lucide-react"

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

export function ItemLinks() {
  return (
    <ItemGroup className="max-w-md gap-0 overflow-hidden rounded-xl border">
      <Item render={<a href="#item" />} className="rounded-none">
        <ItemMedia variant="icon">
          <StoreIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Acme Store</ItemTitle>
        </ItemContent>
        <ItemActions>
          <ChevronRightIcon className="size-4 text-muted-foreground" />
        </ItemActions>
      </Item>
      <ItemSeparator className="my-0" />
      <Item render={<a href="#item" />} className="rounded-none">
        <ItemMedia variant="icon">
          <StoreIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Acme Outlet</ItemTitle>
        </ItemContent>
        <ItemActions>
          <ChevronRightIcon className="size-4 text-muted-foreground" />
        </ItemActions>
      </Item>
    </ItemGroup>
  )
}

Sizes

D
Size default
S
Size sm
X
Size xs
import {
  Item,
  ItemContent,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"

export function ItemSizes() {
  return (
    <ItemGroup className="max-w-md">
      {(["default", "sm", "xs"] as const).map((size) => (
        <Item key={size} size={size} variant="outline">
          <ItemMedia variant="image">
            <Tile letter={size[0].toUpperCase()} className="bg-[#333333]" />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>Size {size}</ItemTitle>
          </ItemContent>
        </Item>
      ))}
    </ItemGroup>
  )
}

// Partner apps show their own logo in a tile. These stand in for logos.
function Tile({ letter, className }: { letter: string; className: string }) {
  return (
    <div
      className={`flex size-full items-center justify-center text-sm font-semibold text-white ${className}`}
    >
      {letter}
    </div>
  )
}

API Reference

Item

The main component for displaying content with media, title, description, and actions.

PropTypeDefault
variant"default" | "outline" | "muted""default"
size"default" | "sm" | "xs""default"
renderReact.ReactElement

ItemGroup

A container that groups related items together with consistent styling.

<ItemGroup>
  <Item />
  <Item />
</ItemGroup>

ItemSeparator

A separator between items in a group.

<ItemGroup>
  <Item />
  <ItemSeparator />
  <Item />
</ItemGroup>

ItemMedia

Use ItemMedia to display media content such as icons, images, or avatars.

PropTypeDefault
variant"default" | "icon" | "image""default"
<ItemMedia variant="icon">
  <Icon />
</ItemMedia>
<ItemMedia variant="image">
  <img src="..." alt="..." />
</ItemMedia>

ItemContent

Wraps the title and description of the item.

<ItemContent>
  <ItemTitle>Title</ItemTitle>
  <ItemDescription>Description</ItemDescription>
</ItemContent>

ItemTitle

Displays the title of the item.

<ItemTitle>Item Title</ItemTitle>

ItemDescription

Displays the description of the item.

<ItemDescription>Item description</ItemDescription>

ItemActions

Container for action buttons or other interactive elements.

<ItemActions>
  <Button>Action</Button>
</ItemActions>

ItemHeader

Displays a header above the item content.

<Item>
  <ItemHeader>Header</ItemHeader>
  <ItemContent>...</ItemContent>
</Item>

ItemFooter

Displays a footer below the item content.

<Item>
  <ItemContent>...</ItemContent>
  <ItemFooter>Footer</ItemFooter>
</Item>
Input GroupKbd