Item

Component item-demo not found in registry.

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add item

Usage

import * as Item from "@/components/ui/item"

<Item.ItemGroup>
  <Item.Root>
    <Item.Media mediaVariant="icon">
      <MailIcon />
    </Item.Media>
    <Item.Content>
      <Item.Title>New message</Item.Title>
      <Item.Description>You have a new message from Sarah</Item.Description>
    </Item.Content>
    <Item.Actions>
      <Button.Root size="icon-sm" appearance="ghost">
        <TrashIcon />
      </Button.Root>
    </Item.Actions>
  </Item.Root>
</Item.ItemGroup>

Examples

Demo

Component item-demo not found in registry.

Variants

Component item-variants not found in registry.

Size

Component item-size not found in registry.

Icon

Component item-icon not found in registry.

Link

Component item-link not found in registry.

Group

Component item-group not found in registry.

Props

Item.Root

This component is based on the <div> element and supports all of its props.

Item.Media

This component is based on the <div> element and supports all of its props.

Item.Content

This component is based on the <div> element and supports all of its props.

Item.Title

This component is based on the <div> element and supports all of its props.

Item.Description

This component is based on the <p> element and supports all of its props.

Item.Actions

This component is based on the <div> element and supports all of its props.

Item.Header

This component is based on the <div> element and supports all of its props.

Item.Footer

This component is based on the <div> element and supports all of its props.

ItemGroup

This component is based on the <div> element and supports all of its props.

ItemSeparator

This component is based on the <hr> element and supports all of its props.