Ember UI LogoEmber UI
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/item
yarn shadcn@latest add @emberui/item
pnpm dlx shadcn@latest add @emberui/item
bunx --bun shadcn@latest add @emberui/item

Reference

This component is based on the shadcn/ui Item component.

On this page