Components
Item
A item component
Preview
Loading...
import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react";import { Button } from "@/registry/axon/ui/button";import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle,} from "@/registry/axon/ui/item";export default function ItemDemo() { return ( <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 className="size-5" /> </ItemMedia> <ItemContent> <ItemTitle>Your profile has been verified.</ItemTitle> </ItemContent> <ItemActions> <ChevronRightIcon className="size-4" /> </ItemActions> </a> </Item> </div> );}Installation
CLI
npx shadcn@latest add @emberui/itemyarn shadcn@latest add @emberui/itempnpm dlx shadcn@latest add @emberui/itembunx --bun shadcn@latest add @emberui/itemReference
This component is based on the shadcn/ui Item component.