{ "schemaVersion": 1, "name": "item", "useFor": "Use for list rows that open something. An email: ItemHeader (sender, date) over ItemContent (ItemTitle subject, ItemDescription preview). A webhook event: ItemHeader (a sm Badge and an arrow) over the event name and its count. A rail row: size sm with ItemMedia variant=\"icon\" and a filled glyph. Mark the open one with aria-current=\"true\". Separate rows with ItemSeparator.", "constraints": [ "Bold titles", "Gray descriptions in email and event lists (they are purple)", "A card border around every row in a list" ], "documentation": "", "source": "Figma 427:2715: Agent Workspace - Inbox (email list), Webhooks - Event catalog (event list), the rail", "exports": [ "Item", "ItemActions", "ItemContent", "ItemDescription", "ItemFooter", "ItemGroup", "ItemHeader", "ItemMedia", "ItemSeparator", "ItemTitle" ], "client": false, "docsUrl": "https://inkbox-ds.vercel.app/components/item", "markdownUrl": "https://inkbox-ds.vercel.app/r/item.md", "examples": [ { "path": "examples/item.tsx", "content": "import { ArrowRightIcon, EnvelopeIcon, GearIcon, KeyIcon, PencilSimpleIcon, PhoneIcon, RobotIcon, UsersThreeIcon } from \"@phosphor-icons/react/ssr\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle } from \"@/components/ui/item\";\n\nconst EMAILS = [\n { from: \"Ray Liao\", when: \"Yesterday\", subject: \"Inkbox A2A: publish your Agent Card and connect by...\", preview: \"Hello @acme, This is Ray, cofounder of Inkbox. This update is written for you...\" },\n { from: \"Ray Liao\", when: \"Jul 31\", subject: \"Agent-to-Agent on Inkbox: you can now delegate...\", preview: \"Hello @acme, This is Ray, cofounder of Inkbox. This week we took A2A across...\" },\n { from: \"Ray Liao\", when: \"Jul 31\", subject: \"Agent-to-Agent on Inkbox: you can now delegate...\", preview: \"Hello @acme, This is Ray, cofounder of Inkbox. Two new capabilities, with exact...\" },\n];\n\nexport function Preview() {\n return (\n \n {EMAILS.map((email, i) => (\n
\n {i > 0 && }\n \n \n \n {email.from}\n {email.when}\n \n \n {email.subject}\n {email.preview}\n \n \n \n
\n ))}\n \n );\n}\n\nexport function Events() {\n return (\n \n {[\"message.sent\", \"message.delivered\", \"message.bounced\"].map((event, i) => (\n
\n {i > 0 && }\n \n \n \n
\n ))}\n \n );\n}\n\nexport function Rail() {\n const rows = [\n { label: \"Agent Workspace\", icon: RobotIcon, current: true },\n { label: \"Manage Agents\", icon: UsersThreeIcon },\n { label: \"API Keys\", icon: KeyIcon },\n { label: \"Email\", icon: EnvelopeIcon },\n { label: \"Phone\", icon: PhoneIcon },\n ];\n return (\n \n {rows.map(({ label, icon: Icon, current }) => (\n \n \n \n \n \n \n {label}\n \n \n \n ))}\n \n );\n}\n\nexport function Variants() {\n return (\n
\n \n \n \n \n \n acme@inkboxmail.com\n Created Jul 27, 2026\n \n \n \n \n \n \n \n \n \n \n Mailbox settings\n \n \n \n \n Shared iMessage Line: Enabled\n \n \n
\n );\n}\n", "exports": [ "Preview", "Events", "Rail", "Variants" ], "requires": [ "item", "badge", "button" ], "packages": [ "@phosphor-icons/react" ], "previews": [ { "name": "Preview", "url": "https://inkbox-ds.vercel.app/preview/item/Preview" }, { "name": "Events", "url": "https://inkbox-ds.vercel.app/preview/item/Events" }, { "name": "Rail", "url": "https://inkbox-ds.vercel.app/preview/item/Rail" }, { "name": "Variants", "url": "https://inkbox-ds.vercel.app/preview/item/Variants" } ] } ], "type": "ui", "title": "Item", "description": "A row of content: an email in the inbox, a webhook event, or a rail row, washing lilac when hovered or selected.", "surface": "site", "kinds": [], "requires": [ "theme", "utils", "separator" ], "packages": [ "radix-ui", "class-variance-authority" ], "files": [ { "path": "components/ui/item.tsx", "content": "import * as React from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/components/ui/separator\";\n\n// A row of content (Figma 427:2715): an email in the inbox list (sender and date over the subject and a purple preview),\n// a webhook event (a tag and an arrow over the event name and a purple count), a rail row (a 22px filled glyph and a\n// 14px label, 38px tall at size sm). `default` is bare and washes lilac under the pointer; a selected item\n// (aria-current or data-selected) sits on the lilac with 8px corners. `outline` takes the field edge, `muted` the lilac.\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return
;\n}\n\nfunction ItemSeparator({ className, ...props }: React.ComponentProps) {\n return ;\n}\n\nconst itemVariants = cva(\n \"group/item flex flex-wrap items-center rounded-control border border-transparent font-sans text-body leading-body text-fg outline-none transition-colors duration-150 ease-out focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring aria-[current=page]:bg-subtle aria-[current=true]:bg-subtle data-[selected=true]:bg-subtle motion-reduce:transition-none [a]:hover:bg-subtle [button]:hover:bg-subtle\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n outline: \"border-line-field bg-surface\",\n muted: \"bg-subtle [a]:hover:bg-subtle-hover [button]:hover:bg-subtle-hover\",\n },\n size: {\n default: \"gap-3 p-3\",\n sm: \"min-h-9.5 gap-2.5 px-3 py-1.5\",\n xs: \"gap-2 px-2 py-1\",\n },\n },\n defaultVariants: { variant: \"default\", size: \"default\" },\n },\n);\n\nfunction Item({ className, variant = \"default\", size = \"default\", asChild = false, ...props }: React.ComponentProps<\"div\"> & VariantProps & { asChild?: boolean }) {\n const Comp = asChild ? Slot.Root : \"div\";\n return ;\n}\n\nconst itemMediaVariants = cva(\"flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none\", {\n variants: {\n variant: {\n default: \"bg-transparent\",\n icon: \"text-icon-default [&_svg:not([class*='size-'])]:size-6\",\n image: \"size-10 overflow-hidden rounded-control [&_img]:size-full [&_img]:object-cover\",\n },\n },\n defaultVariants: { variant: \"default\" },\n});\n\nfunction ItemMedia({ className, variant = \"default\", ...props }: React.ComponentProps<\"div\"> & VariantProps) {\n return
;\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return
;\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return
;\n}\n\n/** The purple line under a title (a preview, a count), clamped to two lines. */\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n return

a]:underline [&>a]:underline-offset-4\", className)} {...props} />;\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n return

;\n}\n\n/** The top line of an item: what it is at the left (sender, tag), when or where at the right (date, arrow). */\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return
;\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return
;\n}\n\nexport { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };\n" } ] }