item-example.json — ui Source File
Architecture documentation for item-example.json, a json file in the ui codebase.
Entity Profile
Source Code
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "item-example",
"title": "Item",
"registryDependencies": [
"button",
"item",
"example"
],
"files": [
{
"path": "registry/base-mira/examples/item-example.tsx",
"content": "import Image from \"next/image\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n Item,\n ItemActions,\n ItemContent,\n ItemDescription,\n ItemFooter,\n ItemGroup,\n ItemHeader,\n ItemMedia,\n ItemSeparator,\n ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n return (\n <ExampleWrapper>\n <DefaultVariantItems />\n <OutlineVariantItems />\n <MutedVariantItems />\n <DefaultVariantItemsSmall />\n <OutlineVariantItemsSmall />\n <MutedVariantItemsSmall />\n <DefaultVariantItemsExtraSmall />\n <OutlineVariantItemsExtraSmall />\n <MutedVariantItemsExtraSmall />\n <DefaultLinkItems />\n <OutlineLinkItems />\n <MutedLinkItems />\n <DefaultItemGroup />\n <OutlineItemGroup />\n <MutedItemGroup />\n <ItemSeparatorExample />\n <ItemHeaderExamples />\n <ItemFooterExamples />\n <ItemHeaderAndFooterExamples />\n <DefaultVariantItemsWithImage />\n <OutlineVariantItemsWithImage />\n <OutlineVariantItemsWithImageSmall />\n <OutlineVariantItemsWithImageExtraSmall />\n <MutedVariantItemsWithImage />\n </ExampleWrapper>\n )\n}\n\nfunction DefaultVariantItems() {\n return (\n <Example title=\"Default\">\n <Item>\n <ItemContent>\n <ItemTitle>Title Only</ItemTitle>\n </ItemContent>\n </Item>\n <Item>\n <ItemContent>\n <ItemTitle>Title + Button</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\">Action</Button>\n </ItemActions>\n </Item>\n <Item>\n <ItemContent>\n <ItemTitle>Title + Description</ItemTitle>\n <ItemDescription>\n This is a description that provides additional context.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item>\n <ItemContent>\n <ItemTitle>Title + Description + Button</ItemTitle>\n <ItemDescription>\n This item includes a title, description, and action button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\">Action</Button>\n </ItemActions>\n </Item>\n <Item>\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title</ItemTitle>\n </ItemContent>\n </Item>\n <Item>\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Button</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Action</Button>\n </ItemActions>\n </Item>\n <Item>\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description</ItemTitle>\n <ItemDescription>\n This item includes media, title, and description.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item>\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description + Button</ItemTitle>\n <ItemDescription>\n Complete item with all components: media, title, description, and\n button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Action</Button>\n </ItemActions>\n </Item>\n <Item>\n <ItemContent>\n <ItemTitle>Multiple Actions</ItemTitle>\n <ItemDescription>\n Item with multiple action buttons in the actions area.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Cancel\n </Button>\n <Button size=\"sm\">Confirm</Button>\n </ItemActions>\n </Item>\n </Example>\n )\n}\n\nfunction OutlineVariantItems() {\n return (\n <Example title=\"Outline\">\n <Item variant=\"outline\">\n <ItemContent>\n <ItemTitle>Title Only</ItemTitle>\n </ItemContent>\n </Item>\n <Item variant=\"outline\">\n <ItemContent>\n <ItemTitle>Title + Button</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\">Action</Button>\n </ItemActions>\n </Item>\n <Item variant=\"outline\">\n <ItemContent>\n <ItemTitle>Title + Description</ItemTitle>\n <ItemDescription>\n This is a description that provides additional context.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"outline\">\n <ItemContent>\n <ItemTitle>Title + Description + Button</ItemTitle>\n <ItemDescription>\n This item includes a title, description, and action button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\">Action</Button>\n </ItemActions>\n </Item>\n <Item variant=\"outline\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title</ItemTitle>\n </ItemContent>\n </Item>\n <Item variant=\"outline\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Button</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Action</Button>\n </ItemActions>\n </Item>\n <Item variant=\"outline\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description</ItemTitle>\n <ItemDescription>\n This item includes media, title, and description.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"outline\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description + Button</ItemTitle>\n <ItemDescription>\n Complete item with all components: media, title, description, and\n button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Action</Button>\n </ItemActions>\n </Item>\n <Item variant=\"outline\">\n <ItemContent>\n <ItemTitle>Multiple Actions</ItemTitle>\n <ItemDescription>\n Item with multiple action buttons in the actions area.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Cancel\n </Button>\n <Button size=\"sm\">Confirm</Button>\n </ItemActions>\n </Item>\n </Example>\n )\n}\n\nfunction MutedVariantItems() {\n return (\n <Example title=\"Muted\">\n <Item variant=\"muted\">\n <ItemContent>\n <ItemTitle>Title Only</ItemTitle>\n </ItemContent>\n </Item>\n <Item variant=\"muted\">\n <ItemContent>\n <ItemTitle>Title + Button</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\">Action</Button>\n </ItemActions>\n </Item>\n <Item variant=\"muted\">\n <ItemContent>\n <ItemTitle>Title + Description</ItemTitle>\n <ItemDescription>\n This is a description that provides additional context.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"muted\">\n <ItemContent>\n <ItemTitle>Title + Description + Button</ItemTitle>\n <ItemDescription>\n This item includes a title, description, and action button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\">Action</Button>\n </ItemActions>\n </Item>\n <Item variant=\"muted\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title</ItemTitle>\n </ItemContent>\n </Item>\n <Item variant=\"muted\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Button</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Action</Button>\n </ItemActions>\n </Item>\n <Item variant=\"muted\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description</ItemTitle>\n <ItemDescription>\n This item includes media, title, and description.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"muted\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description + Button</ItemTitle>\n <ItemDescription>\n Complete item with all components: media, title, description, and\n button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Action</Button>\n </ItemActions>\n </Item>\n <Item variant=\"muted\">\n <ItemContent>\n <ItemTitle>Multiple Actions</ItemTitle>\n <ItemDescription>\n Item with multiple action buttons in the actions area.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Cancel\n </Button>\n <Button size=\"sm\">Confirm</Button>\n </ItemActions>\n </Item>\n </Example>\n )\n}\n\nfunction DefaultVariantItemsSmall() {\n return (\n <Example title=\"Small\">\n <Item size=\"sm\">\n <ItemContent>\n <ItemTitle>Title Only</ItemTitle>\n </ItemContent>\n </Item>\n <Item size=\"sm\">\n <ItemContent>\n <ItemTitle>Title + Button</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Action\n </Button>\n </ItemActions>\n </Item>\n <Item size=\"sm\">\n <ItemContent>\n <ItemTitle>Title + Description</ItemTitle>\n <ItemDescription>\n This is a description that provides additional context.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item size=\"sm\">\n <ItemContent>\n <ItemTitle>Title + Description + Button</ItemTitle>\n <ItemDescription>\n This item includes a title, description, and action button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Action\n </Button>\n </ItemActions>\n </Item>\n <Item size=\"sm\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title</ItemTitle>\n </ItemContent>\n </Item>\n <Item size=\"sm\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Button</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Action</Button>\n </ItemActions>\n </Item>\n <Item size=\"sm\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description</ItemTitle>\n <ItemDescription>\n This item includes media, title, and description.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item size=\"sm\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description + Button</ItemTitle>\n <ItemDescription>\n Complete item with all components: media, title, description, and\n button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Action</Button>\n </ItemActions>\n </Item>\n <Item size=\"sm\">\n <ItemContent>\n <ItemTitle>Multiple Actions</ItemTitle>\n <ItemDescription>\n Item with multiple action buttons in the actions area.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Cancel\n </Button>\n <Button size=\"sm\">Confirm</Button>\n </ItemActions>\n </Item>\n </Example>\n )\n}\n\nfunction OutlineVariantItemsSmall() {\n return (\n <Example title=\"Outline - Small\">\n <Item variant=\"outline\" size=\"sm\">\n <ItemContent>\n <ItemTitle>Title Only</ItemTitle>\n </ItemContent>\n </Item>\n <Item variant=\"outline\" size=\"sm\">\n <ItemContent>\n <ItemTitle>Title + Button</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Action\n </Button>\n </ItemActions>\n </Item>\n <Item variant=\"outline\" size=\"sm\">\n <ItemContent>\n <ItemTitle>Title + Description</ItemTitle>\n <ItemDescription>\n This is a description that provides additional context.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"outline\" size=\"sm\">\n <ItemContent>\n <ItemTitle>Title + Description + Button</ItemTitle>\n <ItemDescription>\n This item includes a title, description, and action button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Action\n </Button>\n </ItemActions>\n </Item>\n <Item variant=\"outline\" size=\"sm\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title</ItemTitle>\n </ItemContent>\n </Item>\n <Item variant=\"outline\" size=\"sm\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Button</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Action</Button>\n </ItemActions>\n </Item>\n <Item variant=\"outline\" size=\"sm\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description</ItemTitle>\n <ItemDescription>\n This item includes media, title, and description.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"outline\" size=\"sm\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description + Button</ItemTitle>\n <ItemDescription>\n Complete item with all components: media, title, description, and\n button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Action</Button>\n </ItemActions>\n </Item>\n <Item variant=\"outline\" size=\"sm\">\n <ItemContent>\n <ItemTitle>Multiple Actions</ItemTitle>\n <ItemDescription>\n Item with multiple action buttons in the actions area.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Cancel\n </Button>\n <Button size=\"sm\">Confirm</Button>\n </ItemActions>\n </Item>\n </Example>\n )\n}\n\nfunction MutedVariantItemsSmall() {\n return (\n <Example title=\"Muted - Small\">\n <Item variant=\"muted\" size=\"sm\">\n <ItemContent>\n <ItemTitle>Title Only</ItemTitle>\n </ItemContent>\n </Item>\n <Item variant=\"muted\" size=\"sm\">\n <ItemContent>\n <ItemTitle>Title + Button</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Action\n </Button>\n </ItemActions>\n </Item>\n <Item variant=\"muted\" size=\"sm\">\n <ItemContent>\n <ItemTitle>Title + Description</ItemTitle>\n <ItemDescription>\n This is a description that provides additional context.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"muted\" size=\"sm\">\n <ItemContent>\n <ItemTitle>Title + Description + Button</ItemTitle>\n <ItemDescription>\n This item includes a title, description, and action button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Action\n </Button>\n </ItemActions>\n </Item>\n <Item variant=\"muted\" size=\"sm\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title</ItemTitle>\n </ItemContent>\n </Item>\n <Item variant=\"muted\" size=\"sm\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Button</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Action</Button>\n </ItemActions>\n </Item>\n <Item variant=\"muted\" size=\"sm\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description</ItemTitle>\n <ItemDescription>\n This item includes media, title, and description.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"muted\" size=\"sm\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description + Button</ItemTitle>\n <ItemDescription>\n Complete item with all components: media, title, description, and\n button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Action</Button>\n </ItemActions>\n </Item>\n <Item variant=\"muted\" size=\"sm\">\n <ItemContent>\n <ItemTitle>Multiple Actions</ItemTitle>\n <ItemDescription>\n Item with multiple action buttons in the actions area.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Cancel\n </Button>\n <Button size=\"sm\">Confirm</Button>\n </ItemActions>\n </Item>\n </Example>\n )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n return (\n <Example title=\"Extra Small\">\n <Item size=\"xs\">\n <ItemContent>\n <ItemTitle>Title Only</ItemTitle>\n </ItemContent>\n </Item>\n <Item size=\"xs\">\n <ItemContent>\n <ItemTitle>Title + Button</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Action\n </Button>\n </ItemActions>\n </Item>\n <Item size=\"xs\">\n <ItemContent>\n <ItemTitle>Title + Description</ItemTitle>\n <ItemDescription>\n This is a description that provides additional context.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item size=\"xs\">\n <ItemContent>\n <ItemTitle>Title + Description + Button</ItemTitle>\n <ItemDescription>\n This item includes a title, description, and action button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Action\n </Button>\n </ItemActions>\n </Item>\n <Item size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title</ItemTitle>\n </ItemContent>\n </Item>\n <Item size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Button</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Action</Button>\n </ItemActions>\n </Item>\n <Item size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description</ItemTitle>\n <ItemDescription>\n This item includes media, title, and description.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description + Button</ItemTitle>\n <ItemDescription>\n Complete item with all components: media, title, description, and\n button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Action</Button>\n </ItemActions>\n </Item>\n <Item size=\"xs\">\n <ItemContent>\n <ItemTitle>Multiple Actions</ItemTitle>\n <ItemDescription>\n Item with multiple action buttons in the actions area.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Cancel\n </Button>\n <Button size=\"sm\">Confirm</Button>\n </ItemActions>\n </Item>\n </Example>\n )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n return (\n <Example title=\"Outline - Extra Small\">\n <Item variant=\"outline\" size=\"xs\">\n <ItemContent>\n <ItemTitle>Title Only</ItemTitle>\n </ItemContent>\n </Item>\n <Item variant=\"outline\" size=\"xs\">\n <ItemContent>\n <ItemTitle>Title + Button</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Action\n </Button>\n </ItemActions>\n </Item>\n <Item variant=\"outline\" size=\"xs\">\n <ItemContent>\n <ItemTitle>Title + Description</ItemTitle>\n <ItemDescription>\n This is a description that provides additional context.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"outline\" size=\"xs\">\n <ItemContent>\n <ItemTitle>Title + Description + Button</ItemTitle>\n <ItemDescription>\n This item includes a title, description, and action button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Action\n </Button>\n </ItemActions>\n </Item>\n <Item variant=\"outline\" size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title</ItemTitle>\n </ItemContent>\n </Item>\n <Item variant=\"outline\" size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Button</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Action</Button>\n </ItemActions>\n </Item>\n <Item variant=\"outline\" size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description</ItemTitle>\n <ItemDescription>\n This item includes media, title, and description.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"outline\" size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description + Button</ItemTitle>\n <ItemDescription>\n Complete item with all components: media, title, description, and\n button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Action</Button>\n </ItemActions>\n </Item>\n <Item variant=\"outline\" size=\"xs\">\n <ItemContent>\n <ItemTitle>Multiple Actions</ItemTitle>\n <ItemDescription>\n Item with multiple action buttons in the actions area.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Cancel\n </Button>\n <Button size=\"sm\">Confirm</Button>\n </ItemActions>\n </Item>\n </Example>\n )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n return (\n <Example title=\"Muted - Extra Small\">\n <Item variant=\"muted\" size=\"xs\">\n <ItemContent>\n <ItemTitle>Title Only</ItemTitle>\n </ItemContent>\n </Item>\n <Item variant=\"muted\" size=\"xs\">\n <ItemContent>\n <ItemTitle>Title + Button</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Action\n </Button>\n </ItemActions>\n </Item>\n <Item variant=\"muted\" size=\"xs\">\n <ItemContent>\n <ItemTitle>Title + Description</ItemTitle>\n <ItemDescription>\n This is a description that provides additional context.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"muted\" size=\"xs\">\n <ItemContent>\n <ItemTitle>Title + Description + Button</ItemTitle>\n <ItemDescription>\n This item includes a title, description, and action button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Action\n </Button>\n </ItemActions>\n </Item>\n <Item variant=\"muted\" size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title</ItemTitle>\n </ItemContent>\n </Item>\n <Item variant=\"muted\" size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Button</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Action</Button>\n </ItemActions>\n </Item>\n <Item variant=\"muted\" size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description</ItemTitle>\n <ItemDescription>\n This item includes media, title, and description.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"muted\" size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description + Button</ItemTitle>\n <ItemDescription>\n Complete item with all components: media, title, description, and\n button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Action</Button>\n </ItemActions>\n </Item>\n <Item variant=\"muted\" size=\"xs\">\n <ItemContent>\n <ItemTitle>Multiple Actions</ItemTitle>\n <ItemDescription>\n Item with multiple action buttons in the actions area.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Cancel\n </Button>\n <Button size=\"sm\">Confirm</Button>\n </ItemActions>\n </Item>\n </Example>\n )\n}\n\nfunction DefaultLinkItems() {\n return (\n <Example title=\"asChild\">\n <ItemGroup>\n <Item render={<a href=\"#\" />}>\n <ItemContent>\n <ItemTitle>Title Only (Link)</ItemTitle>\n </ItemContent>\n </Item>\n <Item render={<a href=\"#\" />}>\n <ItemContent>\n <ItemTitle>Title + Description (Link)</ItemTitle>\n <ItemDescription>\n Clickable item with title and description.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item render={<a href=\"#\" />}>\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title (Link)</ItemTitle>\n </ItemContent>\n </Item>\n <Item render={<a href=\"#\" />}>\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n <ItemDescription>\n Complete link item with media, title, and description.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item render={<a href=\"#\" />}>\n <ItemContent>\n <ItemTitle>With Actions (Link)</ItemTitle>\n <ItemDescription>\n Link item that also has action buttons.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Share\n </Button>\n </ItemActions>\n </Item>\n </ItemGroup>\n </Example>\n )\n}\n\nfunction OutlineLinkItems() {\n return (\n <Example title=\"Outline - asChild\">\n <ItemGroup>\n <Item variant=\"outline\" render={<a href=\"#\" />}>\n <ItemContent>\n <ItemTitle>Title Only (Link)</ItemTitle>\n </ItemContent>\n </Item>\n <Item variant=\"outline\" render={<a href=\"#\" />}>\n <ItemContent>\n <ItemTitle>Title + Description (Link)</ItemTitle>\n <ItemDescription>\n Clickable item with title and description.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"outline\" render={<a href=\"#\" />}>\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title (Link)</ItemTitle>\n </ItemContent>\n </Item>\n <Item variant=\"outline\" render={<a href=\"#\" />}>\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n <ItemDescription>\n Complete link item with media, title, and description.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"outline\" render={<a href=\"#\" />}>\n <ItemContent>\n <ItemTitle>With Actions (Link)</ItemTitle>\n <ItemDescription>\n Link item that also has action buttons.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Share\n </Button>\n </ItemActions>\n </Item>\n </ItemGroup>\n </Example>\n )\n}\n\nfunction MutedLinkItems() {\n return (\n <Example title=\"Muted - asChild\">\n <ItemGroup>\n <Item variant=\"muted\" render={<a href=\"#\" />}>\n <ItemContent>\n <ItemTitle>Title Only (Link)</ItemTitle>\n </ItemContent>\n </Item>\n <Item variant=\"muted\" render={<a href=\"#\" />}>\n <ItemContent>\n <ItemTitle>Title + Description (Link)</ItemTitle>\n <ItemDescription>\n Clickable item with title and description.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"muted\" render={<a href=\"#\" />}>\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title (Link)</ItemTitle>\n </ItemContent>\n </Item>\n <Item variant=\"muted\" render={<a href=\"#\" />}>\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n <ItemDescription>\n Complete link item with media, title, and description.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"muted\" render={<a href=\"#\" />}>\n <ItemContent>\n <ItemTitle>With Actions (Link)</ItemTitle>\n <ItemDescription>\n Link item that also has action buttons.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Share\n </Button>\n </ItemActions>\n </Item>\n </ItemGroup>\n </Example>\n )\n}\n\nfunction DefaultItemGroup() {\n return (\n <Example title=\"ItemGroup\">\n <ItemGroup>\n <Item>\n <ItemContent>\n <ItemTitle>Item 1</ItemTitle>\n <ItemDescription>First item in the group.</ItemDescription>\n </ItemContent>\n </Item>\n <Item>\n <ItemContent>\n <ItemTitle>Item 2</ItemTitle>\n <ItemDescription>Second item in the group.</ItemDescription>\n </ItemContent>\n </Item>\n <Item>\n <ItemContent>\n <ItemTitle>Item 3</ItemTitle>\n <ItemDescription>Third item in the group.</ItemDescription>\n </ItemContent>\n </Item>\n </ItemGroup>\n </Example>\n )\n}\n\nfunction OutlineItemGroup() {\n return (\n <Example title=\"Outline - ItemGroup\">\n <ItemGroup>\n <Item variant=\"outline\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Item 1</ItemTitle>\n <ItemDescription>First item with icon.</ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"outline\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Item 2</ItemTitle>\n <ItemDescription>Second item with icon.</ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"outline\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Item 3</ItemTitle>\n <ItemDescription>Third item with icon.</ItemDescription>\n </ItemContent>\n </Item>\n </ItemGroup>\n </Example>\n )\n}\n\nfunction MutedItemGroup() {\n return (\n <Example title=\"Muted - ItemGroup\">\n <ItemGroup>\n <Item variant=\"muted\">\n <ItemContent>\n <ItemTitle>Item 1</ItemTitle>\n <ItemDescription>First item in muted group.</ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Action\n </Button>\n </ItemActions>\n </Item>\n <Item variant=\"muted\">\n <ItemContent>\n <ItemTitle>Item 2</ItemTitle>\n <ItemDescription>Second item in muted group.</ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Action\n </Button>\n </ItemActions>\n </Item>\n <Item variant=\"muted\">\n <ItemContent>\n <ItemTitle>Item 3</ItemTitle>\n <ItemDescription>Third item in muted group.</ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n Action\n </Button>\n </ItemActions>\n </Item>\n </ItemGroup>\n </Example>\n )\n}\n\nfunction ItemSeparatorExample() {\n return (\n <Example title=\"ItemSeparator\">\n <ItemGroup>\n <Item variant=\"outline\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Inbox</ItemTitle>\n <ItemDescription>View all incoming messages.</ItemDescription>\n </ItemContent>\n </Item>\n <ItemSeparator />\n <Item variant=\"outline\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Sent</ItemTitle>\n <ItemDescription>View all sent messages.</ItemDescription>\n </ItemContent>\n </Item>\n <ItemSeparator />\n <Item variant=\"outline\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Drafts</ItemTitle>\n <ItemDescription>View all draft messages.</ItemDescription>\n </ItemContent>\n </Item>\n <ItemSeparator />\n <Item variant=\"outline\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"InboxIcon\"\n tabler=\"IconArchive\"\n hugeicons=\"Archive02Icon\"\n phosphor=\"ArchiveIcon\"\n remixicon=\"RiArchiveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Archive</ItemTitle>\n <ItemDescription>View archived messages.</ItemDescription>\n </ItemContent>\n </Item>\n </ItemGroup>\n </Example>\n )\n}\n\nfunction ItemHeaderExamples() {\n return (\n <Example title=\"ItemHeader\">\n <Item>\n <ItemHeader>\n <span className=\"text-sm font-medium\">Design System</span>\n </ItemHeader>\n <ItemContent>\n <ItemTitle>Component Library</ItemTitle>\n <ItemDescription>\n A comprehensive collection of reusable UI components for building\n consistent interfaces.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"outline\">\n <ItemHeader>\n <span className=\"text-sm font-medium\">Marketing</span>\n </ItemHeader>\n <ItemContent>\n <ItemTitle>Campaign Analytics</ItemTitle>\n <ItemDescription>\n Track performance metrics and engagement rates across all marketing\n channels.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"muted\">\n <ItemHeader>\n <span className=\"text-sm font-medium\">Engineering</span>\n </ItemHeader>\n <ItemContent>\n <ItemTitle>API Documentation</ItemTitle>\n <ItemDescription>\n Complete reference guide for all available endpoints and\n authentication methods.\n </ItemDescription>\n </ItemContent>\n </Item>\n </Example>\n )\n}\n\nfunction ItemFooterExamples() {\n return (\n <Example title=\"ItemFooter\">\n <Item>\n <ItemContent>\n <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n <ItemDescription>\n Financial overview including revenue, expenses, and growth metrics\n for the fourth quarter.\n </ItemDescription>\n </ItemContent>\n <ItemFooter>\n <span className=\"text-muted-foreground text-sm\">\n Last updated 2 hours ago\n </span>\n </ItemFooter>\n </Item>\n <Item variant=\"outline\">\n <ItemContent>\n <ItemTitle>User Research Findings</ItemTitle>\n <ItemDescription>\n Insights from interviews and surveys conducted with 50+ users across\n different demographics.\n </ItemDescription>\n </ItemContent>\n <ItemFooter>\n <span className=\"text-muted-foreground text-sm\">\n Created by Sarah Chen\n </span>\n </ItemFooter>\n </Item>\n <Item variant=\"muted\">\n <ItemContent>\n <ItemTitle>Product Roadmap</ItemTitle>\n <ItemDescription>\n Planned features and improvements scheduled for the next three\n months.\n </ItemDescription>\n </ItemContent>\n <ItemFooter>\n <span className=\"text-muted-foreground text-sm\">12 comments</span>\n </ItemFooter>\n </Item>\n </Example>\n )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n return (\n <Example title=\"ItemHeader + ItemFooter\">\n <Item>\n <ItemHeader>\n <span className=\"text-sm font-medium\">Team Project</span>\n </ItemHeader>\n <ItemContent>\n <ItemTitle>Website Redesign</ItemTitle>\n <ItemDescription>\n Complete overhaul of the company website with modern design\n principles and improved user experience.\n </ItemDescription>\n </ItemContent>\n <ItemFooter>\n <span className=\"text-muted-foreground text-sm\">\n Updated 5 minutes ago\n </span>\n </ItemFooter>\n </Item>\n <Item variant=\"outline\">\n <ItemHeader>\n <span className=\"text-sm font-medium\">Client Work</span>\n </ItemHeader>\n <ItemContent>\n <ItemTitle>Mobile App Development</ItemTitle>\n <ItemDescription>\n Building a cross-platform mobile application for iOS and Android\n with React Native.\n </ItemDescription>\n </ItemContent>\n <ItemFooter>\n <span className=\"text-muted-foreground text-sm\">\n Status: In Progress\n </span>\n </ItemFooter>\n </Item>\n <Item variant=\"muted\">\n <ItemHeader>\n <span className=\"text-sm font-medium\">Documentation</span>\n </ItemHeader>\n <ItemContent>\n <ItemTitle>API Integration Guide</ItemTitle>\n <ItemDescription>\n Step-by-step instructions for integrating third-party APIs with\n authentication and error handling.\n </ItemDescription>\n </ItemContent>\n <ItemFooter>\n <span className=\"text-muted-foreground text-sm\">\n Category: Technical • 3 attachments\n </span>\n </ItemFooter>\n </Item>\n </Example>\n )\n}\n\nfunction DefaultVariantItemsWithImage() {\n return (\n <Example title=\"Default - ItemMedia image\">\n <Item>\n <ItemMedia variant=\"image\">\n <Image\n src=\"https://avatar.vercel.sh/Project\"\n alt=\"Project\"\n width={40}\n height={40}\n className=\"object-cover grayscale\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Project Dashboard</ItemTitle>\n <ItemDescription>\n Overview of project settings and configuration.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item>\n <ItemMedia variant=\"image\">\n <Image\n src=\"https://avatar.vercel.sh/Document\"\n alt=\"Document\"\n width={40}\n height={40}\n className=\"object-cover grayscale\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Document</ItemTitle>\n <ItemDescription>A document with metadata displayed.</ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n View\n </Button>\n </ItemActions>\n </Item>\n <Item>\n <ItemMedia variant=\"image\">\n <Image\n src=\"https://avatar.vercel.sh/File\"\n alt=\"File\"\n width={40}\n height={40}\n className=\"object-cover grayscale\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>File Attachment</ItemTitle>\n <ItemDescription>\n Complete file with image, title, description, and action button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Download</Button>\n </ItemActions>\n </Item>\n </Example>\n )\n}\n\nfunction OutlineVariantItemsWithImage() {\n return (\n <Example title=\"Outline - ItemMedia image\">\n <Item variant=\"outline\">\n <ItemMedia variant=\"image\">\n <Image\n src=\"https://avatar.vercel.sh/Project\"\n alt=\"Project\"\n width={40}\n height={40}\n className=\"object-cover grayscale\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Project Dashboard</ItemTitle>\n <ItemDescription>\n Overview of project settings and configuration.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"outline\">\n <ItemMedia variant=\"image\">\n <Image\n src=\"https://avatar.vercel.sh/Document\"\n alt=\"Document\"\n width={40}\n height={40}\n className=\"object-cover grayscale\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Document</ItemTitle>\n <ItemDescription>A document with metadata displayed.</ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n View\n </Button>\n </ItemActions>\n </Item>\n <Item variant=\"outline\">\n <ItemMedia variant=\"image\">\n <Image\n src=\"https://avatar.vercel.sh/File\"\n alt=\"File\"\n width={40}\n height={40}\n className=\"object-cover grayscale\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>File Attachment</ItemTitle>\n <ItemDescription>\n Complete file with image, title, description, and action button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Download</Button>\n </ItemActions>\n </Item>\n </Example>\n )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n return (\n <Example title=\"Outline - ItemMedia image - Small\">\n <Item variant=\"outline\" size=\"sm\">\n <ItemMedia variant=\"image\">\n <Image\n src=\"https://avatar.vercel.sh/Project\"\n alt=\"Project\"\n width={40}\n height={40}\n className=\"object-cover grayscale\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Project Dashboard</ItemTitle>\n <ItemDescription>\n Overview of project settings and configuration.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"outline\" size=\"sm\">\n <ItemMedia variant=\"image\">\n <Image\n src=\"https://avatar.vercel.sh/Document\"\n alt=\"Document\"\n width={40}\n height={40}\n className=\"object-cover grayscale\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Document</ItemTitle>\n <ItemDescription>A document with metadata displayed.</ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n View\n </Button>\n </ItemActions>\n </Item>\n <Item variant=\"outline\" size=\"sm\">\n <ItemMedia variant=\"image\">\n <Image\n src=\"https://avatar.vercel.sh/File\"\n alt=\"File\"\n width={40}\n height={40}\n className=\"object-cover grayscale\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>File Attachment</ItemTitle>\n <ItemDescription>\n Complete file with image, title, description, and action button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Download</Button>\n </ItemActions>\n </Item>\n </Example>\n )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n return (\n <Example title=\"Outline - ItemMedia image - Extra Small\">\n <Item variant=\"outline\" size=\"xs\">\n <ItemMedia variant=\"image\">\n <Image\n src=\"https://avatar.vercel.sh/Project\"\n alt=\"Project\"\n width={40}\n height={40}\n className=\"object-cover grayscale\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Project Dashboard</ItemTitle>\n </ItemContent>\n </Item>\n <Item variant=\"outline\" size=\"xs\">\n <ItemMedia variant=\"image\">\n <Image\n src=\"https://avatar.vercel.sh/Document\"\n alt=\"Document\"\n width={40}\n height={40}\n className=\"object-cover grayscale\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Document</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n View\n </Button>\n </ItemActions>\n </Item>\n <Item variant=\"outline\" size=\"xs\">\n <ItemMedia variant=\"image\">\n <Image\n src=\"https://avatar.vercel.sh/File\"\n alt=\"File\"\n width={40}\n height={40}\n className=\"object-cover grayscale\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>File Attachment</ItemTitle>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Download</Button>\n </ItemActions>\n </Item>\n </Example>\n )\n}\n\nfunction MutedVariantItemsWithImage() {\n return (\n <Example title=\"Muted - ItemMedia image\">\n <Item variant=\"muted\">\n <ItemMedia variant=\"image\">\n <Image\n src=\"https://avatar.vercel.sh/Project\"\n alt=\"Project\"\n width={40}\n height={40}\n className=\"object-cover grayscale\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Project Dashboard</ItemTitle>\n <ItemDescription>\n Overview of project settings and configuration.\n </ItemDescription>\n </ItemContent>\n </Item>\n <Item variant=\"muted\">\n <ItemMedia variant=\"image\">\n <Image\n src=\"https://avatar.vercel.sh/Document\"\n alt=\"Document\"\n width={40}\n height={40}\n className=\"object-cover grayscale\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Document</ItemTitle>\n <ItemDescription>A document with metadata displayed.</ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button variant=\"outline\" size=\"sm\">\n View\n </Button>\n </ItemActions>\n </Item>\n <Item variant=\"muted\">\n <ItemMedia variant=\"image\">\n <Image\n src=\"https://avatar.vercel.sh/File\"\n alt=\"File\"\n width={40}\n height={40}\n className=\"object-cover grayscale\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>File Attachment</ItemTitle>\n <ItemDescription>\n Complete file with image, title, description, and action button.\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Button size=\"sm\">Download</Button>\n </ItemActions>\n </Item>\n </Example>\n )\n}\n",
"type": "registry:example"
}
],
"type": "registry:example"
}Source
Frequently Asked Questions
What does item-example.json do?
item-example.json is a source file in the ui codebase, written in json.
Where is item-example.json in the architecture?
item-example.json is located at apps/v4/public/r/styles/base-mira/item-example.json (directory: apps/v4/public/r/styles/base-mira).
Analyze Your Own Codebase
Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.
Try Supermodel Free