shadcn.io is not affiliated with official shadcn/ui
Basic Item
A simple item with title and description.
Your profile has been verified.
Installation
bunx --bun shadcn@latest add https://kit.dev/r/aria/item.jsonnpx shadcn@latest add https://kit.dev/r/aria/item.jsonpnpm dlx shadcn@latest add https://kit.dev/r/aria/item.jsonyarn shadcn@latest add https://kit.dev/r/aria/item.jsonThis component depends on Button and Separator. Install them first if you haven't already.
Install the following dependencies:
bun add react-aria-components tailwind-variantsnpm install react-aria-components tailwind-variantspnpm add react-aria-components tailwind-variantsyarn add react-aria-components tailwind-variantsCopy and paste the following code into your project.
"use client";
import type React from "react";
import { Link as LinkPrimitive, type LinkProps } from "react-aria-components";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";
import { Separator } from "@/components/ui/separator";
export const ItemGroup = (props: React.ComponentProps<"div">) => {
const { className, ...rest } = props;
return (
// biome-ignore lint/a11y/useSemanticElements: Item children are not list items
<div
className={cn(
"cn-item-group group/item-group flex w-full flex-col",
className
)}Update the import paths to match your project setup.
Usage
import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemMedia,
ItemTitle,
} from "@/components/ui/item";<div className="flex w-full max-w-md flex-col gap-6">
<Item variant="outline">
<ItemContent>
<ItemTitle>Basic Item</ItemTitle>
<ItemDescription>
A simple item with title and description.
</ItemDescription>
</ItemContent>
<ItemActions>
<Button size="sm" variant="outline">
Action
</Button>
</ItemActions>
</Item>
<Item asChild size="sm" variant="outline">
<a href="#">
<ItemMedia>
<BadgeCheckIcon aria-hidden="true" className="size-5" />
</ItemMedia>
<ItemContent>
<ItemTitle>Your profile has been verified.</ItemTitle>
</ItemContent>
<ItemActions>
<ChevronRightIcon aria-hidden="true" className="size-4" />
</ItemActions>
</a>
</Item>
</div>Accessibility
| Key | Description |
|---|---|
Enter | Activate the focused control. |
Space | Activate the focused control. |
Demos
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.
Icon
Use ItemMedia with variant="icon" to display an icon.
Avatar
Use ItemMedia with an avatar for profile-style items.
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 asChild to render the item as a link.
Dropdown
Compose Item inside a menu for selectable people rows.
Rtl
Right-to-left item. See the RTL configuration guide for document direction.
API Reference
Item
PropType
AttributeType
ItemGroup
PropType
AttributeType
ItemSeparator
PropType
AttributeType
ItemMedia
PropType
AttributeType
ItemContent
PropType
AttributeType
ItemTitle
PropType
AttributeType
ItemDescription
PropType
AttributeType
ItemActions
PropType
AttributeType
ItemHeader
PropType
AttributeType
ItemFooter
PropType
AttributeType