Components
Item
A flexible list item with media, content, and actions.
Item is a flexible list item with slots for media, content, and actions, useful for lists, menus, and settings panels.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/item.jsonUsage
import { Item, ItemContent, ItemDescription, ItemTitle } from "@/components/ui/item";
export default function Example() {
return (
<Item>
<ItemContent>
<ItemTitle>Title</ItemTitle>
<ItemDescription>Description</ItemDescription>
</ItemContent>
</Item>
);
}Examples
Default
List item
A short description of the item.
With media
With media
Media appears on the leading edge.
With actions
With actions
Actions appear on the trailing edge.
Grouped
First item
Second item
Variants and sizes
Small muted
Outline
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
ItemGroupdata-slot="item-group" | <div>HTML | — |
ItemSeparatordata-slot="item-separator" | SeparatorFaber UI | — |
Itemdata-slot="item" | <div>HTML |
|
ItemMediadata-slot="item-media" | <div>HTML |
|
ItemContentdata-slot="item-content" | <div>HTML | — |
ItemTitledata-slot="item-title" | <div>HTML | — |
ItemDescriptiondata-slot="item-description" | <p>HTML | — |
ItemActionsdata-slot="item-actions" | <div>HTML | — |
ItemHeaderdata-slot="item-header" | <div>HTML | — |
ItemFooterdata-slot="item-footer" | <div>HTML | — |
Last updated on