Attachment
Installation
npx shadcn add https://hq-ui.vercel.app/r/item
Examples
Icon
Use ItemMedia with variant="icon" to display an icon.
New login detected from unknown device.
Avatar
You can use ItemMedia with variant="avatar" to display an avatar.
Last seen 5 months ago
Invite your team to collaborate on this project.
Image
Use ItemMedia with variant="image" to display an image.
Group
Use ItemGroup to group related items together.
shadcn@vercel.com
maxleiter@vercel.com
evilrabbit@vercel.com
Header
Use ItemHeader to add a header above the item content.
Everyday tasks and UI generation.
Advanced thinking or reasoning.
Open Source model for everyone.
Link
Use the asChild prop to render the item as a link. The hover and focus states will be applied to the anchor element.
Dropdown
API Reference
Item
The main component for displaying content with media, title, description, and actions.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "outline" | "muted" | "default" |
size | "default" | "sm" | "xs" | "default" |
asChild | boolean | false |
ItemGroup
A container that groups related items together with consistent styling.
<ItemGroup>
<Item />
<Item />
</ItemGroup>ItemSeparator
A separator between items in a group.
<ItemGroup>
<Item />
<ItemSeparator />
<Item />
</ItemGroup>ItemMedia
Use ItemMedia to display media content such as icons, images, or avatars.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "icon" | "image" | "default" |
<ItemMedia variant="icon">
<Icon />
</ItemMedia><ItemMedia variant="image">
<img src="..." alt="..." />
</ItemMedia>ItemContent
Wraps the title and description of the item.
<ItemContent>
<ItemTitle>Title</ItemTitle>
<ItemDescription>Description</ItemDescription>
</ItemContent>ItemTitle
Displays the title of the item.
<ItemTitle>Item Title</ItemTitle>ItemDescription
Displays the description of the item.
<ItemDescription>Item description</ItemDescription>ItemActions
Container for action buttons or other interactive elements.
<ItemActions>
<Button>Action</Button>
</ItemActions>ItemHeader
Displays a header above the item content.
<Item>
<ItemHeader>Header</ItemHeader>
<ItemContent>...</ItemContent>
</Item>ItemFooter
Displays a footer below the item content.
<Item>
<ItemContent>...</ItemContent>
<ItemFooter>Footer</ItemFooter>
</Item>