3

Item

A flexible layout for a piece of content, media, or action, often used in lists, such as a file list or a settings menu.

Last updated August 8, 2026

CreditsModifiedPublished

Copied from shadcn/ui.

  • Replaced text-left with text-start on ItemDescription for RTL

Overview

Report.pdf

2.4 MB

Cover.png

860 KB

Theme.mp3

4.1 MB

import { FileTextIcon, ImageIcon, MusicIcon } from "lucide-react"
 
import { Button } from "@/components/ui/button"
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from "@/components/ui/item"
 
export function ItemDemoExample() {
  return (
    <ItemGroup className="w-full max-w-sm">
      <Item>
        <ItemMedia variant="icon">
          <FileTextIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Report.pdf</ItemTitle>
          <ItemDescription>2.4 MB</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button size="sm" variant="outline">
            Download
          </Button>
        </ItemActions>
      </Item>
      <ItemSeparator />
      <Item>
        <ItemMedia variant="icon">
          <ImageIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Cover.png</ItemTitle>
          <ItemDescription>860 KB</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button size="sm" variant="outline">
            Download
          </Button>
        </ItemActions>
      </Item>
      <ItemSeparator />
      <Item>
        <ItemMedia variant="icon">
          <MusicIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Theme.mp3</ItemTitle>
          <ItemDescription>4.1 MB</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button size="sm" variant="outline">
            Download
          </Button>
        </ItemActions>
      </Item>
    </ItemGroup>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/item.json

Usage

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"
 
export function Example() {
  return (
    <Item>
      <ItemMedia variant="icon">
        <Icon />
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Title</ItemTitle>
        <ItemDescription>Description</ItemDescription>
      </ItemContent>
      <ItemActions>
        <Button size="sm">Action</Button>
      </ItemActions>
    </Item>
  )
}

Outline

Taymaz

taymazak14@gmail.com

import { UserIcon } from "lucide-react"
 
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"
 
export function ItemOutlineExample() {
  return (
    <Item variant="outline" className="w-full max-w-sm">
      <ItemMedia variant="icon">
        <UserIcon />
      </ItemMedia>
      <ItemContent>
        <ItemTitle>Taymaz</ItemTitle>
        <ItemDescription>taymazak14@gmail.com</ItemDescription>
      </ItemContent>
    </Item>
  )
}

Image

shadcn
shadcn

Building beautiful UI, in the open.

import {
  Item,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"
 
export function ItemImageExample() {
  return (
    <Item variant="muted" className="w-full max-w-sm">
      <ItemMedia variant="image">
        <img src="https://github.com/shadcn.png" alt="shadcn" />
      </ItemMedia>
      <ItemContent>
        <ItemTitle>shadcn</ItemTitle>
        <ItemDescription>Building beautiful UI, in the open.</ItemDescription>
      </ItemContent>
    </Item>
  )
}

RTL

گزارش.pdf

۲.۴ مگابایت

کاور.png

۸۶۰ کیلوبایت

import { FileTextIcon, ImageIcon } from "lucide-react"
 
import { Button } from "@/components/ui/button"
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemSeparator,
  ItemTitle,
} from "@/components/ui/item"
 
export function ItemRtlExample() {
  return (
    <ItemGroup className="w-full max-w-sm">
      <Item>
        <ItemMedia variant="icon">
          <FileTextIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>گزارش.pdf</ItemTitle>
          <ItemDescription>۲.۴ مگابایت</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button size="sm" variant="outline">
            دانلود
          </Button>
        </ItemActions>
      </Item>
      <ItemSeparator />
      <Item>
        <ItemMedia variant="icon">
          <ImageIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>کاور.png</ItemTitle>
          <ItemDescription>۸۶۰ کیلوبایت</ItemDescription>
        </ItemContent>
        <ItemActions>
          <Button size="sm" variant="outline">
            دانلود
          </Button>
        </ItemActions>
      </Item>
    </ItemGroup>
  )
}

API Reference

Item

ItemMedia

Edit this page on GitHub
PreviousInput OTPNextMarker