Title Only
Title + Button
Title + Description
This is a description that provides additional context.
Title + Description + Button
This item includes a title, description, and action button.
Media + Title
Media + Title + Button
Media + Title + Description
This item includes media, title, and description.
Media + Title + Description + Button
Complete item with all components: media, title, description, and button.
Multiple Actions
Item with multiple action buttons in the actions area.
Installation
pnpm dlx shadcn@latest add @cortexcn/itemUsage
import { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter } from "@/components/item";Examples
Default
Title Only
Title + Button
Title + Description
This is a description that provides additional context.
Title + Description + Button
This item includes a title, description, and action button.
Media + Title
Media + Title + Button
Media + Title + Description
This item includes media, title, and description.
Media + Title + Description + Button
Complete item with all components: media, title, description, and button.
Multiple Actions
Item with multiple action buttons in the actions area.
import { Button } from "@/components/button"import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/item"import { InboxIcon } from "lucide-react"export function DefaultVariantItems() { return ( <div className="flex flex-col gap-6"> <Item> <ItemContent> <ItemTitle>Title Only</ItemTitle> </ItemContent> </Item> <Item> <ItemContent> <ItemTitle>Title + Button</ItemTitle> </ItemContent> <ItemActions> <Button variant="outline">Action</Button> </ItemActions> </Item> <Item> <ItemContent> <ItemTitle>Title + Description</ItemTitle> <ItemDescription> This is a description that provides additional context. </ItemDescription> </ItemContent> </Item> <Item> <ItemContent> <ItemTitle>Title + Description + Button</ItemTitle> <ItemDescription> This item includes a title, description, and action button. </ItemDescription> </ItemContent> <ItemActions> <Button variant="outline">Action</Button> </ItemActions> </Item> <Item> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title</ItemTitle> </ItemContent> </Item> <Item> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Button</ItemTitle> </ItemContent> <ItemActions> <Button size="sm">Action</Button> </ItemActions> </Item> <Item> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description</ItemTitle> <ItemDescription> This item includes media, title, and description. </ItemDescription> </ItemContent> </Item> <Item> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description + Button</ItemTitle> <ItemDescription> Complete item with all components: media, title, description, and button. </ItemDescription> </ItemContent> <ItemActions> <Button size="sm">Action</Button> </ItemActions> </Item> <Item> <ItemContent> <ItemTitle>Multiple Actions</ItemTitle> <ItemDescription> Item with multiple action buttons in the actions area. </ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Cancel </Button> <Button size="sm">Confirm</Button> </ItemActions> </Item> </div> )}Outline
Title Only
Title + Button
Title + Description
This is a description that provides additional context.
Title + Description + Button
This item includes a title, description, and action button.
Media + Title
Media + Title + Button
Media + Title + Description
This item includes media, title, and description.
Media + Title + Description + Button
Complete item with all components: media, title, description, and button.
Multiple Actions
Item with multiple action buttons in the actions area.
import { Button } from "@/components/button"import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/item"import { InboxIcon } from "lucide-react"export function OutlineVariantItems() { return ( <div className="flex flex-col gap-6"> <Item variant="outline"> <ItemContent> <ItemTitle>Title Only</ItemTitle> </ItemContent> </Item> <Item variant="outline"> <ItemContent> <ItemTitle>Title + Button</ItemTitle> </ItemContent> <ItemActions> <Button variant="outline">Action</Button> </ItemActions> </Item> <Item variant="outline"> <ItemContent> <ItemTitle>Title + Description</ItemTitle> <ItemDescription> This is a description that provides additional context. </ItemDescription> </ItemContent> </Item> <Item variant="outline"> <ItemContent> <ItemTitle>Title + Description + Button</ItemTitle> <ItemDescription> This item includes a title, description, and action button. </ItemDescription> </ItemContent> <ItemActions> <Button variant="outline">Action</Button> </ItemActions> </Item> <Item variant="outline"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title</ItemTitle> </ItemContent> </Item> <Item variant="outline"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Button</ItemTitle> </ItemContent> <ItemActions> <Button size="sm">Action</Button> </ItemActions> </Item> <Item variant="outline"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description</ItemTitle> <ItemDescription> This item includes media, title, and description. </ItemDescription> </ItemContent> </Item> <Item variant="outline"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description + Button</ItemTitle> <ItemDescription> Complete item with all components: media, title, description, and button. </ItemDescription> </ItemContent> <ItemActions> <Button size="sm">Action</Button> </ItemActions> </Item> <Item variant="outline"> <ItemContent> <ItemTitle>Multiple Actions</ItemTitle> <ItemDescription> Item with multiple action buttons in the actions area. </ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Cancel </Button> <Button size="sm">Confirm</Button> </ItemActions> </Item> </div> )}Muted
Title Only
Title + Button
Title + Description
This is a description that provides additional context.
Title + Description + Button
This item includes a title, description, and action button.
Media + Title
Media + Title + Button
Media + Title + Description
This item includes media, title, and description.
Media + Title + Description + Button
Complete item with all components: media, title, description, and button.
Multiple Actions
Item with multiple action buttons in the actions area.
import { Button } from "@/components/button"import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/item"import { InboxIcon } from "lucide-react"export function MutedVariantItems() { return ( <div className="flex flex-col gap-6"> <Item variant="muted"> <ItemContent> <ItemTitle>Title Only</ItemTitle> </ItemContent> </Item> <Item variant="muted"> <ItemContent> <ItemTitle>Title + Button</ItemTitle> </ItemContent> <ItemActions> <Button variant="outline">Action</Button> </ItemActions> </Item> <Item variant="muted"> <ItemContent> <ItemTitle>Title + Description</ItemTitle> <ItemDescription> This is a description that provides additional context. </ItemDescription> </ItemContent> </Item> <Item variant="muted"> <ItemContent> <ItemTitle>Title + Description + Button</ItemTitle> <ItemDescription> This item includes a title, description, and action button. </ItemDescription> </ItemContent> <ItemActions> <Button variant="outline">Action</Button> </ItemActions> </Item> <Item variant="muted"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title</ItemTitle> </ItemContent> </Item> <Item variant="muted"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Button</ItemTitle> </ItemContent> <ItemActions> <Button size="sm">Action</Button> </ItemActions> </Item> <Item variant="muted"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description</ItemTitle> <ItemDescription> This item includes media, title, and description. </ItemDescription> </ItemContent> </Item> <Item variant="muted"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description + Button</ItemTitle> <ItemDescription> Complete item with all components: media, title, description, and button. </ItemDescription> </ItemContent> <ItemActions> <Button size="sm">Action</Button> </ItemActions> </Item> <Item variant="muted"> <ItemContent> <ItemTitle>Multiple Actions</ItemTitle> <ItemDescription> Item with multiple action buttons in the actions area. </ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Cancel </Button> <Button size="sm">Confirm</Button> </ItemActions> </Item> </div> )}Small
Title Only
Title + Button
Title + Description
This is a description that provides additional context.
Title + Description + Button
This item includes a title, description, and action button.
Media + Title
Media + Title + Button
Media + Title + Description
This item includes media, title, and description.
Media + Title + Description + Button
Complete item with all components: media, title, description, and button.
Multiple Actions
Item with multiple action buttons in the actions area.
import { Button } from "@/components/button"import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/item"import { InboxIcon } from "lucide-react"export function DefaultVariantItemsSmall() { return ( <div className="flex flex-col gap-6"> <Item size="sm"> <ItemContent> <ItemTitle>Title Only</ItemTitle> </ItemContent> </Item> <Item size="sm"> <ItemContent> <ItemTitle>Title + Button</ItemTitle> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Action </Button> </ItemActions> </Item> <Item size="sm"> <ItemContent> <ItemTitle>Title + Description</ItemTitle> <ItemDescription> This is a description that provides additional context. </ItemDescription> </ItemContent> </Item> <Item size="sm"> <ItemContent> <ItemTitle>Title + Description + Button</ItemTitle> <ItemDescription> This item includes a title, description, and action button. </ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Action </Button> </ItemActions> </Item> <Item size="sm"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title</ItemTitle> </ItemContent> </Item> <Item size="sm"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Button</ItemTitle> </ItemContent> <ItemActions> <Button size="sm">Action</Button> </ItemActions> </Item> <Item size="sm"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description</ItemTitle> <ItemDescription> This item includes media, title, and description. </ItemDescription> </ItemContent> </Item> <Item size="sm"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description + Button</ItemTitle> <ItemDescription> Complete item with all components: media, title, description, and button. </ItemDescription> </ItemContent> <ItemActions> <Button size="sm">Action</Button> </ItemActions> </Item> <Item size="sm"> <ItemContent> <ItemTitle>Multiple Actions</ItemTitle> <ItemDescription> Item with multiple action buttons in the actions area. </ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Cancel </Button> <Button size="sm">Confirm</Button> </ItemActions> </Item> </div> )}Outline, small
Title Only
Title + Button
Title + Description
This is a description that provides additional context.
Title + Description + Button
This item includes a title, description, and action button.
Media + Title
Media + Title + Button
Media + Title + Description
This item includes media, title, and description.
Media + Title + Description + Button
Complete item with all components: media, title, description, and button.
Multiple Actions
Item with multiple action buttons in the actions area.
import { Button } from "@/components/button"import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/item"import { InboxIcon } from "lucide-react"export function OutlineVariantItemsSmall() { return ( <div className="flex flex-col gap-6"> <Item variant="outline" size="sm"> <ItemContent> <ItemTitle>Title Only</ItemTitle> </ItemContent> </Item> <Item variant="outline" size="sm"> <ItemContent> <ItemTitle>Title + Button</ItemTitle> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Action </Button> </ItemActions> </Item> <Item variant="outline" size="sm"> <ItemContent> <ItemTitle>Title + Description</ItemTitle> <ItemDescription> This is a description that provides additional context. </ItemDescription> </ItemContent> </Item> <Item variant="outline" size="sm"> <ItemContent> <ItemTitle>Title + Description + Button</ItemTitle> <ItemDescription> This item includes a title, description, and action button. </ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Action </Button> </ItemActions> </Item> <Item variant="outline" size="sm"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title</ItemTitle> </ItemContent> </Item> <Item variant="outline" size="sm"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Button</ItemTitle> </ItemContent> <ItemActions> <Button size="sm">Action</Button> </ItemActions> </Item> <Item variant="outline" size="sm"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description</ItemTitle> <ItemDescription> This item includes media, title, and description. </ItemDescription> </ItemContent> </Item> <Item variant="outline" size="sm"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description + Button</ItemTitle> <ItemDescription> Complete item with all components: media, title, description, and button. </ItemDescription> </ItemContent> <ItemActions> <Button size="sm">Action</Button> </ItemActions> </Item> <Item variant="outline" size="sm"> <ItemContent> <ItemTitle>Multiple Actions</ItemTitle> <ItemDescription> Item with multiple action buttons in the actions area. </ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Cancel </Button> <Button size="sm">Confirm</Button> </ItemActions> </Item> </div> )}Muted, small
Title Only
Title + Button
Title + Description
This is a description that provides additional context.
Title + Description + Button
This item includes a title, description, and action button.
Media + Title
Media + Title + Button
Media + Title + Description
This item includes media, title, and description.
Media + Title + Description + Button
Complete item with all components: media, title, description, and button.
Multiple Actions
Item with multiple action buttons in the actions area.
import { Button } from "@/components/button"import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/item"import { InboxIcon } from "lucide-react"export function MutedVariantItemsSmall() { return ( <div className="flex flex-col gap-6"> <Item variant="muted" size="sm"> <ItemContent> <ItemTitle>Title Only</ItemTitle> </ItemContent> </Item> <Item variant="muted" size="sm"> <ItemContent> <ItemTitle>Title + Button</ItemTitle> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Action </Button> </ItemActions> </Item> <Item variant="muted" size="sm"> <ItemContent> <ItemTitle>Title + Description</ItemTitle> <ItemDescription> This is a description that provides additional context. </ItemDescription> </ItemContent> </Item> <Item variant="muted" size="sm"> <ItemContent> <ItemTitle>Title + Description + Button</ItemTitle> <ItemDescription> This item includes a title, description, and action button. </ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Action </Button> </ItemActions> </Item> <Item variant="muted" size="sm"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title</ItemTitle> </ItemContent> </Item> <Item variant="muted" size="sm"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Button</ItemTitle> </ItemContent> <ItemActions> <Button size="sm">Action</Button> </ItemActions> </Item> <Item variant="muted" size="sm"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description</ItemTitle> <ItemDescription> This item includes media, title, and description. </ItemDescription> </ItemContent> </Item> <Item variant="muted" size="sm"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description + Button</ItemTitle> <ItemDescription> Complete item with all components: media, title, description, and button. </ItemDescription> </ItemContent> <ItemActions> <Button size="sm">Action</Button> </ItemActions> </Item> <Item variant="muted" size="sm"> <ItemContent> <ItemTitle>Multiple Actions</ItemTitle> <ItemDescription> Item with multiple action buttons in the actions area. </ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Cancel </Button> <Button size="sm">Confirm</Button> </ItemActions> </Item> </div> )}Extra small
import { Button } from "@/components/button"import { Item, ItemActions, ItemContent, ItemMedia, ItemTitle } from "@/components/item"import { InboxIcon } from "lucide-react"export function DefaultVariantItemsExtraSmall() { return ( <div className="flex flex-col gap-6"> <Item size="xs"> <ItemContent> <ItemTitle>Title Only</ItemTitle> </ItemContent> </Item> <Item size="xs"> <ItemContent> <ItemTitle>Title + Button</ItemTitle> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Action </Button> </ItemActions> </Item> <Item size="xs"> <ItemContent> <ItemTitle>Title + Description</ItemTitle> </ItemContent> </Item> <Item size="xs"> <ItemContent> <ItemTitle>Title + Description + Button</ItemTitle> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Action </Button> </ItemActions> </Item> <Item size="xs"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title</ItemTitle> </ItemContent> </Item> <Item size="xs"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Button</ItemTitle> </ItemContent> <ItemActions> <Button size="sm">Action</Button> </ItemActions> </Item> <Item size="xs"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description</ItemTitle> </ItemContent> </Item> <Item size="xs"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description + Button</ItemTitle> </ItemContent> <ItemActions> <Button size="sm">Action</Button> </ItemActions> </Item> <Item size="xs"> <ItemContent> <ItemTitle>Multiple Actions</ItemTitle> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Cancel </Button> <Button size="sm">Confirm</Button> </ItemActions> </Item> </div> )}Outline, extra small
import { Button } from "@/components/button"import { Item, ItemActions, ItemContent, ItemMedia, ItemTitle } from "@/components/item"import { InboxIcon } from "lucide-react"export function OutlineVariantItemsExtraSmall() { return ( <div className="flex flex-col gap-6"> <Item variant="outline" size="xs"> <ItemContent> <ItemTitle>Title Only</ItemTitle> </ItemContent> </Item> <Item variant="outline" size="xs"> <ItemContent> <ItemTitle>Title + Button</ItemTitle> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Action </Button> </ItemActions> </Item> <Item variant="outline" size="xs"> <ItemContent> <ItemTitle>Title + Description</ItemTitle> </ItemContent> </Item> <Item variant="outline" size="xs"> <ItemContent> <ItemTitle>Title + Description + Button</ItemTitle> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Action </Button> </ItemActions> </Item> <Item variant="outline" size="xs"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title</ItemTitle> </ItemContent> </Item> <Item variant="outline" size="xs"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Button</ItemTitle> </ItemContent> <ItemActions> <Button size="sm">Action</Button> </ItemActions> </Item> <Item variant="outline" size="xs"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description</ItemTitle> </ItemContent> </Item> <Item variant="outline" size="xs"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description + Button</ItemTitle> </ItemContent> <ItemActions> <Button size="sm">Action</Button> </ItemActions> </Item> <Item variant="outline" size="xs"> <ItemContent> <ItemTitle>Multiple Actions</ItemTitle> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Cancel </Button> <Button size="sm">Confirm</Button> </ItemActions> </Item> </div> )}Muted, extra small
import { Button } from "@/components/button"import { Item, ItemActions, ItemContent, ItemMedia, ItemTitle } from "@/components/item"import { InboxIcon } from "lucide-react"export function MutedVariantItemsExtraSmall() { return ( <div className="flex flex-col gap-6"> <Item variant="muted" size="xs"> <ItemContent> <ItemTitle>Title Only</ItemTitle> </ItemContent> </Item> <Item variant="muted" size="xs"> <ItemContent> <ItemTitle>Title + Button</ItemTitle> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Action </Button> </ItemActions> </Item> <Item variant="muted" size="xs"> <ItemContent> <ItemTitle>Title + Description</ItemTitle> </ItemContent> </Item> <Item variant="muted" size="xs"> <ItemContent> <ItemTitle>Title + Description + Button</ItemTitle> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Action </Button> </ItemActions> </Item> <Item variant="muted" size="xs"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title</ItemTitle> </ItemContent> </Item> <Item variant="muted" size="xs"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Button</ItemTitle> </ItemContent> <ItemActions> <Button size="sm">Action</Button> </ItemActions> </Item> <Item variant="muted" size="xs"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description</ItemTitle> </ItemContent> </Item> <Item variant="muted" size="xs"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description + Button</ItemTitle> </ItemContent> <ItemActions> <Button size="sm">Action</Button> </ItemActions> </Item> <Item variant="muted" size="xs"> <ItemContent> <ItemTitle>Multiple Actions</ItemTitle> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Cancel </Button> <Button size="sm">Confirm</Button> </ItemActions> </Item> </div> )}asChild
import { Button } from "@/components/button"import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle } from "@/components/item"import { InboxIcon } from "lucide-react"export function DefaultLinkItems() { return ( <div className="flex flex-col gap-6"> <ItemGroup> <Item asChild> <a href="#"> <ItemContent> <ItemTitle>Title Only (Link)</ItemTitle> </ItemContent> </a> </Item> <Item asChild> <a href="#"> <ItemContent> <ItemTitle>Title + Description (Link)</ItemTitle> <ItemDescription> Clickable item with title and description. </ItemDescription> </ItemContent> </a> </Item> <Item asChild> <a href="#"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title (Link)</ItemTitle> </ItemContent> </a> </Item> <Item asChild> <a href="#"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description (Link)</ItemTitle> <ItemDescription> Complete link item with media, title, and description. </ItemDescription> </ItemContent> </a> </Item> <Item asChild> <a href="#"> <ItemContent> <ItemTitle>With Actions (Link)</ItemTitle> <ItemDescription> Link item that also has action buttons. </ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Share </Button> </ItemActions> </a> </Item> </ItemGroup> </div> )}Outline, asChild
import { Button } from "@/components/button"import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle } from "@/components/item"import { InboxIcon } from "lucide-react"export function OutlineLinkItems() { return ( <div className="flex flex-col gap-6"> <ItemGroup> <Item variant="outline" asChild> <a href="#"> <ItemContent> <ItemTitle>Title Only (Link)</ItemTitle> </ItemContent> </a> </Item> <Item variant="outline" asChild> <a href="#"> <ItemContent> <ItemTitle>Title + Description (Link)</ItemTitle> <ItemDescription> Clickable item with title and description. </ItemDescription> </ItemContent> </a> </Item> <Item variant="outline" asChild> <a href="#"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title (Link)</ItemTitle> </ItemContent> </a> </Item> <Item variant="outline" asChild> <a href="#"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description (Link)</ItemTitle> <ItemDescription> Complete link item with media, title, and description. </ItemDescription> </ItemContent> </a> </Item> <Item variant="outline" asChild> <a href="#"> <ItemContent> <ItemTitle>With Actions (Link)</ItemTitle> <ItemDescription> Link item that also has action buttons. </ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Share </Button> </ItemActions> </a> </Item> </ItemGroup> </div> )}Muted, asChild
import { Button } from "@/components/button"import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle } from "@/components/item"import { InboxIcon } from "lucide-react"export function MutedLinkItems() { return ( <div className="flex flex-col gap-6"> <ItemGroup> <Item variant="muted" asChild> <a href="#"> <ItemContent> <ItemTitle>Title Only (Link)</ItemTitle> </ItemContent> </a> </Item> <Item variant="muted" asChild> <a href="#"> <ItemContent> <ItemTitle>Title + Description (Link)</ItemTitle> <ItemDescription> Clickable item with title and description. </ItemDescription> </ItemContent> </a> </Item> <Item variant="muted" asChild> <a href="#"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title (Link)</ItemTitle> </ItemContent> </a> </Item> <Item variant="muted" asChild> <a href="#"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title + Description (Link)</ItemTitle> <ItemDescription> Complete link item with media, title, and description. </ItemDescription> </ItemContent> </a> </Item> <Item variant="muted" asChild> <a href="#"> <ItemContent> <ItemTitle>With Actions (Link)</ItemTitle> <ItemDescription> Link item that also has action buttons. </ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Share </Button> </ItemActions> </a> </Item> </ItemGroup> </div> )}ItemGroup
Item 1
First item in the group.
Item 2
Second item in the group.
Item 3
Third item in the group.
import { Item, ItemContent, ItemDescription, ItemGroup, ItemTitle } from "@/components/item"export function DefaultItemGroup() { return ( <div className="flex flex-col gap-6"> <ItemGroup> <Item> <ItemContent> <ItemTitle>Item 1</ItemTitle> <ItemDescription>First item in the group.</ItemDescription> </ItemContent> </Item> <Item> <ItemContent> <ItemTitle>Item 2</ItemTitle> <ItemDescription>Second item in the group.</ItemDescription> </ItemContent> </Item> <Item> <ItemContent> <ItemTitle>Item 3</ItemTitle> <ItemDescription>Third item in the group.</ItemDescription> </ItemContent> </Item> </ItemGroup> </div> )}Outline, ItemGroup
Item 1
First item with icon.
Item 2
Second item with icon.
Item 3
Third item with icon.
import { Item, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle } from "@/components/item"import { InboxIcon } from "lucide-react"export function OutlineItemGroup() { return ( <div className="flex flex-col gap-6"> <ItemGroup> <Item variant="outline"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Item 1</ItemTitle> <ItemDescription>First item with icon.</ItemDescription> </ItemContent> </Item> <Item variant="outline"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Item 2</ItemTitle> <ItemDescription>Second item with icon.</ItemDescription> </ItemContent> </Item> <Item variant="outline"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Item 3</ItemTitle> <ItemDescription>Third item with icon.</ItemDescription> </ItemContent> </Item> </ItemGroup> </div> )}Muted, ItemGroup
Item 1
First item in muted group.
Item 2
Second item in muted group.
Item 3
Third item in muted group.
import { Button } from "@/components/button"import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemTitle } from "@/components/item"export function MutedItemGroup() { return ( <div className="flex flex-col gap-6"> <ItemGroup> <Item variant="muted"> <ItemContent> <ItemTitle>Item 1</ItemTitle> <ItemDescription>First item in muted group.</ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Action </Button> </ItemActions> </Item> <Item variant="muted"> <ItemContent> <ItemTitle>Item 2</ItemTitle> <ItemDescription>Second item in muted group.</ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Action </Button> </ItemActions> </Item> <Item variant="muted"> <ItemContent> <ItemTitle>Item 3</ItemTitle> <ItemDescription>Third item in muted group.</ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> Action </Button> </ItemActions> </Item> </ItemGroup> </div> )}ItemSeparator
Inbox
View all incoming messages.
Sent
View all sent messages.
Drafts
View all draft messages.
Archive
View archived messages.
import { Item, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemSeparator, ItemTitle } from "@/components/item"import { InboxIcon } from "lucide-react"export function ItemSeparatorExample() { return ( <div className="flex flex-col gap-6"> <ItemGroup> <Item variant="outline"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Inbox</ItemTitle> <ItemDescription>View all incoming messages.</ItemDescription> </ItemContent> </Item> <ItemSeparator /> <Item variant="outline"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Sent</ItemTitle> <ItemDescription>View all sent messages.</ItemDescription> </ItemContent> </Item> <ItemSeparator /> <Item variant="outline"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Drafts</ItemTitle> <ItemDescription>View all draft messages.</ItemDescription> </ItemContent> </Item> <ItemSeparator /> <Item variant="outline"> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Archive</ItemTitle> <ItemDescription>View archived messages.</ItemDescription> </ItemContent> </Item> </ItemGroup> </div> )}ItemHeader
Design System
Component Library
A comprehensive collection of reusable UI components for building consistent interfaces.
Marketing
Campaign Analytics
Track performance metrics and engagement rates across all marketing channels.
Engineering
API Documentation
Complete reference guide for all available endpoints and authentication methods.
import { Item, ItemContent, ItemDescription, ItemHeader, ItemTitle } from "@/components/item"export function ItemHeaderExamples() { return ( <div className="flex flex-col gap-6"> <Item> <ItemHeader> <span className="text-sm font-medium">Design System</span> </ItemHeader> <ItemContent> <ItemTitle>Component Library</ItemTitle> <ItemDescription> A comprehensive collection of reusable UI components for building consistent interfaces. </ItemDescription> </ItemContent> </Item> <Item variant="outline"> <ItemHeader> <span className="text-sm font-medium">Marketing</span> </ItemHeader> <ItemContent> <ItemTitle>Campaign Analytics</ItemTitle> <ItemDescription> Track performance metrics and engagement rates across all marketing channels. </ItemDescription> </ItemContent> </Item> <Item variant="muted"> <ItemHeader> <span className="text-sm font-medium">Engineering</span> </ItemHeader> <ItemContent> <ItemTitle>API Documentation</ItemTitle> <ItemDescription> Complete reference guide for all available endpoints and authentication methods. </ItemDescription> </ItemContent> </Item> </div> )}ItemFooter
Quarterly Report Q4 2024
Financial overview including revenue, expenses, and growth metrics for the fourth quarter.
Last updated 2 hours ago
User Research Findings
Insights from interviews and surveys conducted with 50+ users across different demographics.
Created by Sarah Chen
Product Roadmap
Planned features and improvements scheduled for the next three months.
12 comments
import { Item, ItemContent, ItemDescription, ItemFooter, ItemTitle } from "@/components/item"export function ItemFooterExamples() { return ( <div className="flex flex-col gap-6"> <Item> <ItemContent> <ItemTitle>Quarterly Report Q4 2024</ItemTitle> <ItemDescription> Financial overview including revenue, expenses, and growth metrics for the fourth quarter. </ItemDescription> </ItemContent> <ItemFooter> <span className="text-sm text-muted-foreground"> Last updated 2 hours ago </span> </ItemFooter> </Item> <Item variant="outline"> <ItemContent> <ItemTitle>User Research Findings</ItemTitle> <ItemDescription> Insights from interviews and surveys conducted with 50+ users across different demographics. </ItemDescription> </ItemContent> <ItemFooter> <span className="text-sm text-muted-foreground"> Created by Sarah Chen </span> </ItemFooter> </Item> <Item variant="muted"> <ItemContent> <ItemTitle>Product Roadmap</ItemTitle> <ItemDescription> Planned features and improvements scheduled for the next three months. </ItemDescription> </ItemContent> <ItemFooter> <span className="text-sm text-muted-foreground">12 comments</span> </ItemFooter> </Item> </div> )}ItemHeader and ItemFooter
Team Project
Website Redesign
Complete overhaul of the company website with modern design principles and improved user experience.
Updated 5 minutes ago
Client Work
Mobile App Development
Building a cross-platform mobile application for iOS and Android with React Native.
Status: In Progress
Documentation
API Integration Guide
Step-by-step instructions for integrating third-party APIs with authentication and error handling.
Category: Technical • 3 attachments
import { Item, ItemContent, ItemDescription, ItemFooter, ItemHeader, ItemTitle } from "@/components/item"export function ItemHeaderAndFooterExamples() { return ( <div className="flex flex-col gap-6"> <Item> <ItemHeader> <span className="text-sm font-medium">Team Project</span> </ItemHeader> <ItemContent> <ItemTitle>Website Redesign</ItemTitle> <ItemDescription> Complete overhaul of the company website with modern design principles and improved user experience. </ItemDescription> </ItemContent> <ItemFooter> <span className="text-sm text-muted-foreground"> Updated 5 minutes ago </span> </ItemFooter> </Item> <Item variant="outline"> <ItemHeader> <span className="text-sm font-medium">Client Work</span> </ItemHeader> <ItemContent> <ItemTitle>Mobile App Development</ItemTitle> <ItemDescription> Building a cross-platform mobile application for iOS and Android with React Native. </ItemDescription> </ItemContent> <ItemFooter> <span className="text-sm text-muted-foreground"> Status: In Progress </span> </ItemFooter> </Item> <Item variant="muted"> <ItemHeader> <span className="text-sm font-medium">Documentation</span> </ItemHeader> <ItemContent> <ItemTitle>API Integration Guide</ItemTitle> <ItemDescription> Step-by-step instructions for integrating third-party APIs with authentication and error handling. </ItemDescription> </ItemContent> <ItemFooter> <span className="text-sm text-muted-foreground"> Category: Technical • 3 attachments </span> </ItemFooter> </Item> </div> )}Item with drawer
import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/drawer"import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/item"import { FileIcon, FileSearchIcon } from "lucide-react"export function ItemWithDrawer() { return ( <div className="flex flex-col gap-6"> <Drawer> <Item asChild variant="outline"> <DrawerTrigger> <ItemMedia variant="icon"> <FileSearchIcon /> </ItemMedia> <ItemContent> <ItemTitle>Explored 4 files</ItemTitle> <ItemDescription> Review the files that were searched for this answer. </ItemDescription> </ItemContent> </DrawerTrigger> </Item> <DrawerContent> <DrawerHeader> <DrawerTitle>Explored files</DrawerTitle> <DrawerDescription> Files opened while generating the response. </DrawerDescription> </DrawerHeader> <div className="grid gap-3 p-4"> {[ "app/chat/page.tsx", "components/message.tsx", "lib/ai.ts", "app/api/chat/route.ts", ].map((file) => ( <Item key={file} variant="muted" size="sm"> <ItemMedia variant="icon"> <FileIcon /> </ItemMedia> <ItemContent> <ItemTitle>{file}</ItemTitle> </ItemContent> </Item> ))} </div> </DrawerContent> </Drawer> </div> )}Default, ItemMedia image
Project Dashboard
Overview of project settings and configuration.
Document
A document with metadata displayed.
File Attachment
Complete file with image, title, description, and action button.
import Image from "next/image"import { Button } from "@/components/button"import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/item"export function DefaultVariantItemsWithImage() { return ( <div className="flex flex-col gap-6"> <Item> <ItemMedia variant="image"> <Image src="https://avatar.vercel.sh/Project" alt="Project" width={40} height={40} className="object-cover grayscale" /> </ItemMedia> <ItemContent> <ItemTitle>Project Dashboard</ItemTitle> <ItemDescription> Overview of project settings and configuration. </ItemDescription> </ItemContent> </Item> <Item> <ItemMedia variant="image"> <Image src="https://avatar.vercel.sh/Document" alt="Document" width={40} height={40} className="object-cover grayscale" /> </ItemMedia> <ItemContent> <ItemTitle>Document</ItemTitle> <ItemDescription>A document with metadata displayed.</ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> View </Button> </ItemActions> </Item> <Item> <ItemMedia variant="image"> <Image src="https://avatar.vercel.sh/File" alt="File" width={40} height={40} className="object-cover grayscale" /> </ItemMedia> <ItemContent> <ItemTitle>File Attachment</ItemTitle> <ItemDescription> Complete file with image, title, description, and action button. </ItemDescription> </ItemContent> <ItemActions> <Button size="sm">Download</Button> </ItemActions> </Item> </div> )}Outline, ItemMedia image
Project Dashboard
Overview of project settings and configuration.
Document
A document with metadata displayed.
File Attachment
Complete file with image, title, description, and action button.
import Image from "next/image"import { Button } from "@/components/button"import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/item"export function OutlineVariantItemsWithImage() { return ( <div className="flex flex-col gap-6"> <Item variant="outline"> <ItemMedia variant="image"> <Image src="https://avatar.vercel.sh/Project" alt="Project" width={40} height={40} className="object-cover grayscale" /> </ItemMedia> <ItemContent> <ItemTitle>Project Dashboard</ItemTitle> <ItemDescription> Overview of project settings and configuration. </ItemDescription> </ItemContent> </Item> <Item variant="outline"> <ItemMedia variant="image"> <Image src="https://avatar.vercel.sh/Document" alt="Document" width={40} height={40} className="object-cover grayscale" /> </ItemMedia> <ItemContent> <ItemTitle>Document</ItemTitle> <ItemDescription>A document with metadata displayed.</ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> View </Button> </ItemActions> </Item> <Item variant="outline"> <ItemMedia variant="image"> <Image src="https://avatar.vercel.sh/File" alt="File" width={40} height={40} className="object-cover grayscale" /> </ItemMedia> <ItemContent> <ItemTitle>File Attachment</ItemTitle> <ItemDescription> Complete file with image, title, description, and action button. </ItemDescription> </ItemContent> <ItemActions> <Button size="sm">Download</Button> </ItemActions> </Item> </div> )}Outline, ItemMedia image, small
Project Dashboard
Overview of project settings and configuration.
Document
A document with metadata displayed.
File Attachment
Complete file with image, title, description, and action button.
import Image from "next/image"import { Button } from "@/components/button"import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/item"export function OutlineVariantItemsWithImageSmall() { return ( <div className="flex flex-col gap-6"> <Item variant="outline" size="sm"> <ItemMedia variant="image"> <Image src="https://avatar.vercel.sh/Project" alt="Project" width={40} height={40} className="object-cover grayscale" /> </ItemMedia> <ItemContent> <ItemTitle>Project Dashboard</ItemTitle> <ItemDescription> Overview of project settings and configuration. </ItemDescription> </ItemContent> </Item> <Item variant="outline" size="sm"> <ItemMedia variant="image"> <Image src="https://avatar.vercel.sh/Document" alt="Document" width={40} height={40} className="object-cover grayscale" /> </ItemMedia> <ItemContent> <ItemTitle>Document</ItemTitle> <ItemDescription>A document with metadata displayed.</ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> View </Button> </ItemActions> </Item> <Item variant="outline" size="sm"> <ItemMedia variant="image"> <Image src="https://avatar.vercel.sh/File" alt="File" width={40} height={40} className="object-cover grayscale" /> </ItemMedia> <ItemContent> <ItemTitle>File Attachment</ItemTitle> <ItemDescription> Complete file with image, title, description, and action button. </ItemDescription> </ItemContent> <ItemActions> <Button size="sm">Download</Button> </ItemActions> </Item> </div> )}Outline, ItemMedia image, extra small
Project Dashboard
Document
File Attachment
import Image from "next/image"import { Button } from "@/components/button"import { Item, ItemActions, ItemContent, ItemMedia, ItemTitle } from "@/components/item"export function OutlineVariantItemsWithImageExtraSmall() { return ( <div className="flex flex-col gap-6"> <Item variant="outline" size="xs"> <ItemMedia variant="image"> <Image src="https://avatar.vercel.sh/Project" alt="Project" width={40} height={40} className="object-cover grayscale" /> </ItemMedia> <ItemContent> <ItemTitle>Project Dashboard</ItemTitle> </ItemContent> </Item> <Item variant="outline" size="xs"> <ItemMedia variant="image"> <Image src="https://avatar.vercel.sh/Document" alt="Document" width={40} height={40} className="object-cover grayscale" /> </ItemMedia> <ItemContent> <ItemTitle>Document</ItemTitle> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> View </Button> </ItemActions> </Item> <Item variant="outline" size="xs"> <ItemMedia variant="image"> <Image src="https://avatar.vercel.sh/File" alt="File" width={40} height={40} className="object-cover grayscale" /> </ItemMedia> <ItemContent> <ItemTitle>File Attachment</ItemTitle> </ItemContent> <ItemActions> <Button size="sm">Download</Button> </ItemActions> </Item> </div> )}Muted, ItemMedia image
Project Dashboard
Overview of project settings and configuration.
Document
A document with metadata displayed.
File Attachment
Complete file with image, title, description, and action button.
import Image from "next/image"import { Button } from "@/components/button"import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/item"export function MutedVariantItemsWithImage() { return ( <div className="flex flex-col gap-6"> <Item variant="muted"> <ItemMedia variant="image"> <Image src="https://avatar.vercel.sh/Project" alt="Project" width={40} height={40} className="object-cover grayscale" /> </ItemMedia> <ItemContent> <ItemTitle>Project Dashboard</ItemTitle> <ItemDescription> Overview of project settings and configuration. </ItemDescription> </ItemContent> </Item> <Item variant="muted"> <ItemMedia variant="image"> <Image src="https://avatar.vercel.sh/Document" alt="Document" width={40} height={40} className="object-cover grayscale" /> </ItemMedia> <ItemContent> <ItemTitle>Document</ItemTitle> <ItemDescription>A document with metadata displayed.</ItemDescription> </ItemContent> <ItemActions> <Button variant="outline" size="sm"> View </Button> </ItemActions> </Item> <Item variant="muted"> <ItemMedia variant="image"> <Image src="https://avatar.vercel.sh/File" alt="File" width={40} height={40} className="object-cover grayscale" /> </ItemMedia> <ItemContent> <ItemTitle>File Attachment</ItemTitle> <ItemDescription> Complete file with image, title, description, and action button. </ItemDescription> </ItemContent> <ItemActions> <Button size="sm">Download</Button> </ItemActions> </Item> </div> )}Adapted from the shadcn/ui Item (MIT).