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 January 1, 1980

CreditsModifiedPublished

Copied from shadcn/ui.

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

Overview

Installation

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>
  )
}

Examples

Outline

Image

RTL

API Reference

Item

ItemMedia