0

Item

PreviousNext

A versatile component for displaying content with media, title, description, and actions.

Basic Item

A simple item with title and description.

Your profile has been verified.
import { IconCircleCheck, IconChevronRight } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"

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

bunx --bun shadcn@latest add @ondo-ui/item

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>

Composition

Use the following composition to build an Item:

ItemGroup
└── Item
    ├── ItemHeader
    ├── ItemMedia
    ├── ItemContent
    │   ├── ItemTitle
    │   └── ItemDescription
    ├── ItemActions
    └── ItemFooter

Examples

Icon

Use ItemMedia with variant="icon" to display an icon.

Security Alert

New login detected from unknown device.

import { IconAlertCircle } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"

Avatar

You can use ItemMedia with variant="avatar" to display an avatar.

ER
Evil Rabbit

Last seen 5 months ago

ER
No Team Members

Invite your team to collaborate on this project.

import { IconPlus } from "@tabler/icons-react"

import {

Image

Use ItemMedia with variant="image" to display an image.

import Image from "next/image"

import {

Group

Use ItemGroup to group related items together.

s
shadcn

shadcn@vercel.com

m
maxleiter

maxleiter@vercel.com

e
evilrabbit

evilrabbit@vercel.com

import * as React from "react"
import { IconPlus } from "@tabler/icons-react"

Use ItemHeader to add a header above the item content.

v0-1.5-sm
v0-1.5-sm

Everyday tasks and UI generation.

v0-1.5-lg
v0-1.5-lg

Advanced thinking or reasoning.

v0-2.0-mini
v0-2.0-mini

Open Source model for everyone.

import Image from "next/image"

import {

Use the render prop to render the item as a link. The hover and focus states will be applied to the anchor element.

import { IconChevronRight, IconExternalLink } from "@tabler/icons-react"

import {
"use client"

import { IconChevronDown } from "@tabler/icons-react"

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>