--- title: Item description: A versatile component for displaying content with media, title, description, and actions. base: base component: true --- The `Item` component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the `ItemGroup` component to create a list of items. ## Installation Command Manual ```bash npx shadcn@latest add item ``` Copy and paste the following code into your project. Update the import paths to match your project setup. ## Usage ```tsx showLineNumbers import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle, } from "@/components/ui/item" ``` ```tsx showLineNumbers Title Description ``` ## Composition Use the following composition to build an `Item`: ```text ItemGroup └── Item ├── ItemHeader ├── ItemMedia ├── ItemContent │ ├── ItemTitle │ └── ItemDescription ├── ItemActions └── ItemFooter ``` ## Item vs Field Use `Field` if you need to display a form input such as a checkbox, input, radio, or select. If you only need to display content such as a title, description, and actions, use `Item`. ## Variant Use the `variant` prop to change the visual style of the item. ## Size Use the `size` prop to change the size of the item. Available sizes are `default`, `sm`, and `xs`. ## Examples ### Icon Use `ItemMedia` with `variant="icon"` to display an icon. ### Avatar You can use `ItemMedia` with `variant="avatar"` to display an avatar. ### Image Use `ItemMedia` with `variant="image"` to display an image. ### Group Use `ItemGroup` to group related items together. ### Header Use `ItemHeader` to add a header above the item content. ### Link Use the `render` prop to render the item as a link. The hover and focus states will be applied to the anchor element. ```tsx showLineNumbers }> Dashboard Overview of your account and activity. ``` ### Dropdown ## RTL To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl). ## API Reference ### Item The main component for displaying content with media, title, description, and actions. | Prop | Type | Default | | --------- | ----------------------------------- | ----------- | | `variant` | `"default" \| "outline" \| "muted"` | `"default"` | | `size` | `"default" \| "sm" \| "xs"` | `"default"` | | `render` | `React.ReactElement` | | ### ItemGroup A container that groups related items together with consistent styling. ```tsx ``` ### ItemSeparator A separator between items in a group. ```tsx ``` ### ItemMedia Use `ItemMedia` to display media content such as icons, images, or avatars. | Prop | Type | Default | | --------- | -------------------------------- | ----------- | | `variant` | `"default" \| "icon" \| "image"` | `"default"` | ```tsx ``` ```tsx

``` ### ItemContent Wraps the title and description of the item. ```tsx Title Description ``` ### ItemTitle Displays the title of the item. ```tsx Item Title ``` ### ItemDescription Displays the description of the item. ```tsx Item description ``` ### ItemActions Container for action buttons or other interactive elements. ```tsx ``` ### ItemHeader Displays a header above the item content. ```tsx Header ... ``` ### ItemFooter Displays a footer below the item content. ```tsx ... Footer ```