Itemstandard
아이콘·제목·설명·동작을 한 줄에 놓는 목록 항목(item)입니다. shadcn base-nova 의 `item` 을 그대로 싣습니다. 표 형태의 많은 열은 `table` 을 씁니다.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/item의존 아이템separator
Default
item-example.tsx
import Image from "next/image"
import { Example, ExampleWrapper,} from "@/components/example"import { Button } from "@/components/ui/button"import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle,} from "@/components/ui/item"import { InboxIcon } from "lucide-react"
export default function ItemExample() { return ( <ExampleWrapper> <DefaultVariantItems /> <OutlineVariantItems /> <MutedVariantItems /> <DefaultVariantItemsSmall /> <OutlineVariantItemsSmall /> <MutedVariantItemsSmall /> <DefaultVariantItemsExtraSmall /> <OutlineVariantItemsExtraSmall /> <MutedVariantItemsExtraSmall /> <DefaultLinkItems /> <OutlineLinkItems /> <MutedLinkItems /> <DefaultItemGroup /> <OutlineItemGroup /> <MutedItemGroup /> <ItemSeparatorExample /> <ItemHeaderExamples /> <ItemFooterExamples /> <ItemHeaderAndFooterExamples /> <DefaultVariantItemsWithImage /> <OutlineVariantItemsWithImage /> <OutlineVariantItemsWithImageSmall /> <OutlineVariantItemsWithImageExtraSmall /> <MutedVariantItemsWithImage /> </ExampleWrapper> )}
function DefaultVariantItems() { return ( <Example title="Default"> <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> </Example> )}
function OutlineVariantItems() { return ( <Example title="Outline"> <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> </Example> )}
function MutedVariantItems() { return ( <Example title="Muted"> <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> </Example> )}
function DefaultVariantItemsSmall() { return ( <Example title="Small"> <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> </Example> )}
function OutlineVariantItemsSmall() { return ( <Example title="Outline - Small"> <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> </Example> )}
function MutedVariantItemsSmall() { return ( <Example title="Muted - Small"> <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> </Example> )}
function DefaultVariantItemsExtraSmall() { return ( <Example title="Extra Small"> <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> <ItemDescription> This is a description that provides additional context. </ItemDescription> </ItemContent> </Item> <Item size="xs"> <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="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> <ItemDescription> This item includes media, title, and description. </ItemDescription> </ItemContent> </Item> <Item size="xs"> <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="xs"> <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> </Example> )}
function OutlineVariantItemsExtraSmall() { return ( <Example title="Outline - Extra Small"> <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> <ItemDescription> This is a description that provides additional context. </ItemDescription> </ItemContent> </Item> <Item variant="outline" size="xs"> <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="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> <ItemDescription> This item includes media, title, and description. </ItemDescription> </ItemContent> </Item> <Item variant="outline" size="xs"> <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="xs"> <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> </Example> )}
function MutedVariantItemsExtraSmall() { return ( <Example title="Muted - Extra Small"> <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> <ItemDescription> This is a description that provides additional context. </ItemDescription> </ItemContent> </Item> <Item variant="muted" size="xs"> <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="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> <ItemDescription> This item includes media, title, and description. </ItemDescription> </ItemContent> </Item> <Item variant="muted" size="xs"> <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="xs"> <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> </Example> )}
function DefaultLinkItems() { return ( <Example title="asChild"> <ItemGroup> <Item render={<a href="#" />}> <ItemContent> <ItemTitle>Title Only (Link)</ItemTitle> </ItemContent> </Item> <Item render={<a href="#" />}> <ItemContent> <ItemTitle>Title + Description (Link)</ItemTitle> <ItemDescription> Clickable item with title and description. </ItemDescription> </ItemContent> </Item> <Item render={<a href="#" />}> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title (Link)</ItemTitle> </ItemContent> </Item> <Item render={<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> </Item> <Item render={<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> </Item> </ItemGroup> </Example> )}
function OutlineLinkItems() { return ( <Example title="Outline - asChild"> <ItemGroup> <Item variant="outline" render={<a href="#" />}> <ItemContent> <ItemTitle>Title Only (Link)</ItemTitle> </ItemContent> </Item> <Item variant="outline" render={<a href="#" />}> <ItemContent> <ItemTitle>Title + Description (Link)</ItemTitle> <ItemDescription> Clickable item with title and description. </ItemDescription> </ItemContent> </Item> <Item variant="outline" render={<a href="#" />}> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title (Link)</ItemTitle> </ItemContent> </Item> <Item variant="outline" render={<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> </Item> <Item variant="outline" render={<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> </Item> </ItemGroup> </Example> )}
function MutedLinkItems() { return ( <Example title="Muted - asChild"> <ItemGroup> <Item variant="muted" render={<a href="#" />}> <ItemContent> <ItemTitle>Title Only (Link)</ItemTitle> </ItemContent> </Item> <Item variant="muted" render={<a href="#" />}> <ItemContent> <ItemTitle>Title + Description (Link)</ItemTitle> <ItemDescription> Clickable item with title and description. </ItemDescription> </ItemContent> </Item> <Item variant="muted" render={<a href="#" />}> <ItemMedia variant="icon"> <InboxIcon /> </ItemMedia> <ItemContent> <ItemTitle>Media + Title (Link)</ItemTitle> </ItemContent> </Item> <Item variant="muted" render={<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> </Item> <Item variant="muted" render={<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> </Item> </ItemGroup> </Example> )}
function DefaultItemGroup() { return ( <Example title="ItemGroup"> <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> </Example> )}
function OutlineItemGroup() { return ( <Example title="Outline - ItemGroup"> <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> </Example> )}
function MutedItemGroup() { return ( <Example title="Muted - ItemGroup"> <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> </Example> )}
function ItemSeparatorExample() { return ( <Example title="ItemSeparator"> <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> </Example> )}
function ItemHeaderExamples() { return ( <Example title="ItemHeader"> <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> </Example> )}
function ItemFooterExamples() { return ( <Example title="ItemFooter"> <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> </Example> )}
function ItemHeaderAndFooterExamples() { return ( <Example title="ItemHeader + ItemFooter"> <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> </Example> )}
function DefaultVariantItemsWithImage() { return ( <Example title="Default - ItemMedia image"> <Item> <ItemMedia variant="image"> <Image src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%232563eb'/%3E%3C/svg%3E" 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="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23059669'/%3E%3C/svg%3E" 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="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23d97706'/%3E%3C/svg%3E" 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> </Example> )}
function OutlineVariantItemsWithImage() { return ( <Example title="Outline - ItemMedia image"> <Item variant="outline"> <ItemMedia variant="image"> <Image src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%232563eb'/%3E%3C/svg%3E" 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="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23059669'/%3E%3C/svg%3E" 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="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23d97706'/%3E%3C/svg%3E" 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> </Example> )}
function OutlineVariantItemsWithImageSmall() { return ( <Example title="Outline - ItemMedia image - Small"> <Item variant="outline" size="sm"> <ItemMedia variant="image"> <Image src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%232563eb'/%3E%3C/svg%3E" 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="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23059669'/%3E%3C/svg%3E" 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="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23d97706'/%3E%3C/svg%3E" 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> </Example> )}
function OutlineVariantItemsWithImageExtraSmall() { return ( <Example title="Outline - ItemMedia image - Extra Small"> <Item variant="outline" size="xs"> <ItemMedia variant="image"> <Image src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%232563eb'/%3E%3C/svg%3E" 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="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23059669'/%3E%3C/svg%3E" 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="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23d97706'/%3E%3C/svg%3E" 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> </Example> )}
function MutedVariantItemsWithImage() { return ( <Example title="Muted - ItemMedia image"> <Item variant="muted"> <ItemMedia variant="image"> <Image src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%232563eb'/%3E%3C/svg%3E" 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="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23059669'/%3E%3C/svg%3E" 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="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%3E%3Crect%20width='8'%20height='8'%20fill='%23d97706'/%3E%3C/svg%3E" 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> </Example> )}
