A simple item with title and description.
import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Item,
ItemActions,Installation
Usage
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemMedia,
ItemTitle,
} from "@/components/ui/item/item";<Item>
<ItemMedia>
<Icon />
</ItemMedia>
<ItemContent>
<ItemTitle>Item</ItemTitle>
<ItemDescription>Description</ItemDescription>
</ItemContent>
<ItemActions>
<Button>Action</Button>
</ItemActions>
</Item>Composition
Use the following composition to build an Item:
Item
├── ItemMedia
├── ItemContent
│ ├── ItemTitle
│ └── ItemDescription
└── ItemActionsVariant
Use the variant prop to change the style of the item.
Transparent background with no border.
Outlined style with a visible border.
Muted background for secondary content.
import { InboxIcon } from "lucide-react";
import {
Item,
ItemContent,
ItemDescription,Size
Use the size prop to change the size of the item.
The standard size for most use cases.
A compact size for dense layouts.
The most compact size available.
import { InboxIcon } from "lucide-react";
import {
Item,
ItemContent,
ItemDescription,Examples
Icon
New login detected from unknown device.
import { ShieldAlertIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Item,
ItemActions,Avatar
Last seen 5 months ago
Invite your team to collaborate on this project.
import { PlusIcon } from "lucide-react";
import {
Avatar,
AvatarFallback,
AvatarGroup,Image
import {
Item,
ItemContent,
ItemDescription,
ItemGroup,
ItemMedia,Group
Use the ItemGroup component to group related items together.
shadcn@vercel.com
maxleiter@vercel.com
evilrabbit@vercel.com
import { PlusIcon } from "lucide-react";
import {
Avatar,
AvatarFallback,
AvatarImage,Header
Use the ItemHeader component to display a header above the item content.
Everyday tasks and UI generation.
Advanced thinking or reasoning.
Open Source model for everyone.
import {
Item,
ItemContent,
ItemDescription,
ItemGroup,
ItemHeader,Link
Render an item as a link using the render prop.
import { ChevronRightIcon, ExternalLinkIcon } from "lucide-react";
import {
Item,
ItemActions,
ItemContent,Dropdown
"use client";
import { ChevronDownIcon } from "lucide-react";
import {
Avatar,RTL
To enable right-to-left support, see the RTL guide.
تم اكتشاف تسجيل دخول جديد من جهاز غير معروف.
"use client";
import { ChevronLeftIcon, ShieldAlertIcon } from "lucide-react";
import { useTranslation } from "@/components/language-selector";
import type { Translations } from "@/components/language-selector";API Reference
Item
The main component for displaying content with media, title, description, and actions.
ItemGroup
A container that groups related items together with consistent styling.
ItemSeparator
A separator between items in a group.
ItemMedia
Use ItemMedia to display media content such as icons, images, or avatars.
ItemContent
Wraps the title and description of the item.
ItemTitle
Displays the title of the item.
ItemDescription
Displays the description of the item.
ItemActions
Container for action buttons or other interactive elements.
ItemHeader
Displays a header above the item content.
ItemFooter
Displays a footer below the item content.