Item

Installation

›pnpm dlx shadcn@latest add @evolphin/item

Usage

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemTitle,
} from "@/components/ui/item";

<Item>
  <ItemContent>
    <ItemTitle>Item Title</ItemTitle>
    <ItemDescription>Item Description</ItemDescription>
  </ItemContent>
</Item>

Type Definitions

interface ItemProps {
  /** The visual style of the item */
  variant?: "default" | "outline" | "muted";   
ItemProps.variant?: "default" | "outline" | "muted" | undefined
The visual style of the item
  /** The size of the item */
  ?: "default" | "sm";
}

interface ItemMediaProps {
  /** The visual style of the media container */
  ?: "default" | "icon" | "image";
}

Examples

Default

Jane Doe

Software Engineer

List Group

General

System settings and preferences

Account

Manage your account

With Header and Footer

Order #1234

Pending

2 items â€¢ $120.00

API Reference

Prop	Type	Default	Description
`variant`	`"default" \	"outline" \	"muted"`
`size`	`"default" \	"sm"`	`"default"`
`asChild`	`boolean`	`false`	Change the component to the HTML tag or custom component of the only child.
`className`	`string`	-	Additional CSS classes

ItemMedia

Prop	Type	Default	Description
`variant`	`"default" \	"icon" \	"image"`
`className`	`string`	-	Additional CSS classes

ItemContent

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ItemActions

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ItemTitle

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ItemDescription

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ItemGroup

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ItemSeparator

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Search

Item

On this page