{
  "version": 1,
  "generatedAt": "2026-08-12T17:31:13.454Z",
  "components": [
    {
      "name": "Accordion",
      "category": "Data Display",
      "slug": "accordion",
      "element": "<details> + <summary>",
      "summary": "Native disclosure, exclusive open via a shared name.",
      "status": "available",
      "reactExports": [
        "Accordion",
        "AccordionItem"
      ],
      "elementTag": "kernel-accordion",
      "elementSubTags": [
        "kernel-accordion-item"
      ],
      "docsUrl": "https://www.kernelui.com/components/accordion/",
      "shadcnAliases": [
        "accordion",
        "collapsible"
      ],
      "radixPackages": [
        "@radix-ui/react-accordion",
        "@radix-ui/react-collapsible"
      ],
      "migrationCaveats": [
        "Radix Accordion uses controlled value/onValueChange on the root; Kernel AccordionItem uses title + defaultOpen per item.",
        "No Radix-style AccordionTrigger/AccordionContent composition — pass title and children to AccordionItem."
      ]
    },
    {
      "name": "Agent Activity",
      "category": "AI",
      "slug": "agent-activity",
      "element": "<ol> of steps",
      "summary": "One chronological stream of reasoning, searches, tool calls, and traces.",
      "status": "available",
      "reactExports": [
        "AgentActivity",
        "AgentActivityItem"
      ],
      "elementTag": "kernel-agent-activity",
      "elementSubTags": [
        "kernel-agent-activity-item"
      ],
      "docsUrl": "https://www.kernelui.com/components/agent-activity/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Avatar",
      "category": "Primitives",
      "slug": "avatar",
      "element": "<img>",
      "summary": "Real image, with an initials fallback.",
      "status": "available",
      "reactExports": [
        "Avatar"
      ],
      "elementTag": "kernel-avatar",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/avatar/",
      "shadcnAliases": [
        "avatar"
      ],
      "radixPackages": [
        "@radix-ui/react-avatar"
      ],
      "migrationCaveats": []
    },
    {
      "name": "Badge",
      "category": "Primitives",
      "slug": "badge",
      "element": "<span>",
      "summary": "A small status chip.",
      "status": "available",
      "reactExports": [
        "Badge"
      ],
      "elementTag": "kernel-badge",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/badge/",
      "shadcnAliases": [
        "badge"
      ],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Breadcrumbs",
      "category": "Navigation",
      "slug": "breadcrumbs",
      "element": "<nav aria-label=\"breadcrumb\"> + <ol>",
      "summary": "Ordered trail, aria-current for the current page.",
      "status": "available",
      "reactExports": [
        "Breadcrumbs",
        "BreadcrumbItem",
        "BreadcrumbsTrail"
      ],
      "elementTag": "kernel-breadcrumbs",
      "elementSubTags": [
        "kernel-breadcrumb-item"
      ],
      "docsUrl": "https://www.kernelui.com/components/breadcrumbs/",
      "shadcnAliases": [
        "breadcrumb"
      ],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Button",
      "category": "Primitives",
      "slug": "button",
      "element": "<button>",
      "summary": "Click, keyboard, and form association, for free.",
      "status": "available",
      "reactExports": [
        "Button"
      ],
      "elementTag": "kernel-button",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/button/",
      "shadcnAliases": [
        "button"
      ],
      "radixPackages": [
        "@radix-ui/react-slot"
      ],
      "migrationCaveats": [
        "shadcn asChild maps to Kernel's render prop: <Button render={<a href=\"...\" />}>."
      ]
    },
    {
      "name": "Callout",
      "category": "Feedback",
      "slug": "callout",
      "element": "role=\"alert\" / role=\"status\"",
      "summary": "Live-region feedback that announces itself.",
      "status": "available",
      "reactExports": [
        "Callout"
      ],
      "elementTag": "kernel-callout",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/callout/",
      "shadcnAliases": [
        "alert"
      ],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Card",
      "category": "Layout",
      "slug": "card",
      "element": "<article> / <div>",
      "summary": "For genuinely self-contained, distributable content.",
      "status": "available",
      "reactExports": [
        "Card",
        "CardHeader",
        "CardTitle",
        "CardDescription",
        "CardContent",
        "CardFooter"
      ],
      "elementTag": "kernel-card",
      "elementSubTags": [
        "kernel-card-header",
        "kernel-card-title",
        "kernel-card-description",
        "kernel-card-content",
        "kernel-card-footer"
      ],
      "docsUrl": "https://www.kernelui.com/components/card/",
      "shadcnAliases": [
        "card"
      ],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Carousel",
      "category": "Data Display",
      "slug": "carousel",
      "element": "scroll-snap-type / scroll-snap-align",
      "summary": "Native scrolling instead of a JS carousel engine.",
      "status": "available",
      "reactExports": [
        "Carousel",
        "CarouselSlide"
      ],
      "elementTag": "kernel-carousel",
      "elementSubTags": [
        "kernel-carousel-slide"
      ],
      "docsUrl": "https://www.kernelui.com/components/carousel/",
      "shadcnAliases": [
        "carousel"
      ],
      "radixPackages": [
        "embla-carousel-react"
      ],
      "migrationCaveats": []
    },
    {
      "name": "Checkbox",
      "category": "Primitives",
      "slug": "checkbox",
      "element": "<input type=\"checkbox\">",
      "summary": "Tri-state, styled with :checked and :indeterminate.",
      "status": "available",
      "reactExports": [
        "Checkbox"
      ],
      "elementTag": "kernel-checkbox",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/checkbox/",
      "shadcnAliases": [
        "checkbox"
      ],
      "radixPackages": [
        "@radix-ui/react-checkbox"
      ],
      "migrationCaveats": [
        "onCheckedChange naming matches Radix; value API uses checked/defaultChecked/onCheckedChange."
      ]
    },
    {
      "name": "Code Block",
      "category": "AI",
      "slug": "code-block",
      "element": "<figure> + <pre><code>",
      "summary": "A code surface with line numbers, copy, and stable streaming.",
      "status": "available",
      "reactExports": [
        "CodeBlock",
        "linesFromCode",
        "linesText"
      ],
      "elementTag": "kernel-code-block",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/code-block/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Color Picker",
      "category": "Forms",
      "slug": "color-picker",
      "element": "<input type=\"color\"> + editable hex <input>",
      "summary": "A real colour input, plus a typeable hex field on the same value.",
      "status": "available",
      "reactExports": [
        "ColorPicker"
      ],
      "elementTag": "kernel-color-picker",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/color-picker/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Combobox",
      "category": "Forms",
      "slug": "combobox",
      "element": "<input role=\"combobox\"> + popover listbox",
      "summary": "Filterable list with aria-activedescendant.",
      "status": "available",
      "reactExports": [
        "Combobox"
      ],
      "elementTag": "kernel-combobox",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/combobox/",
      "shadcnAliases": [
        "combobox",
        "command"
      ],
      "radixPackages": [
        "@radix-ui/react-select",
        "cmdk"
      ],
      "migrationCaveats": [
        "Custom Radix/shadcn Select with search/filter usually maps here, not native Select.",
        "Options are passed as an options prop array, not SelectItem children."
      ]
    },
    {
      "name": "Command Palette",
      "category": "Overlays",
      "slug": "command-palette",
      "element": "<dialog> + <input> + role=\"listbox\"",
      "summary": "A searchable, keyboard-driven action list.",
      "status": "available",
      "reactExports": [
        "CommandPalette"
      ],
      "elementTag": "kernel-command-palette",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/command-palette/",
      "shadcnAliases": [
        "command"
      ],
      "radixPackages": [
        "cmdk"
      ],
      "migrationCaveats": []
    },
    {
      "name": "Composer",
      "category": "AI",
      "slug": "composer",
      "element": "<textarea> with field-sizing: content",
      "summary": "A chat message input, with a live \"thinking\" state.",
      "status": "available",
      "reactExports": [
        "Composer"
      ],
      "elementTag": "kernel-composer",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/composer/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Context Menu",
      "category": "Overlays",
      "slug": "context-menu",
      "element": "role=\"menu\" at cursor position",
      "summary": "Right-click menu, same primitives as Dropdown Menu.",
      "status": "available",
      "reactExports": [
        "ContextMenu"
      ],
      "elementTag": "kernel-context-menu",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/context-menu/",
      "shadcnAliases": [
        "context-menu"
      ],
      "radixPackages": [
        "@radix-ui/react-context-menu"
      ],
      "migrationCaveats": []
    },
    {
      "name": "Data Table",
      "category": "Data Display",
      "slug": "data-table",
      "element": "<table> + sort/filter/paginate",
      "summary": "Table plus the behaviour layered on top.",
      "status": "available",
      "reactExports": [
        "DataTable"
      ],
      "elementTag": "kernel-data-table",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/data-table/",
      "shadcnAliases": [
        "data-table",
        "table"
      ],
      "radixPackages": [],
      "migrationCaveats": [
        "TanStack Table column definitions differ; Kernel DataTable takes a columns prop with a simpler API."
      ]
    },
    {
      "name": "Date Picker",
      "category": "Data Display",
      "slug": "date-picker",
      "element": "<table> grid of <button> day cells",
      "summary": "Calendar grid with aria-selected.",
      "status": "available",
      "reactExports": [
        "DatePicker"
      ],
      "elementTag": "kernel-date-picker",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/date-picker/",
      "shadcnAliases": [
        "calendar",
        "date-picker"
      ],
      "radixPackages": [
        "react-day-picker"
      ],
      "migrationCaveats": []
    },
    {
      "name": "Date Range Picker",
      "category": "Data Display",
      "slug": "date-range-picker",
      "element": "<table> grid of <button> day cells",
      "summary": "Two-click range selection over the same calendar grid.",
      "status": "available",
      "reactExports": [
        "DateRangePicker"
      ],
      "elementTag": "kernel-date-range-picker",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/date-range-picker/",
      "shadcnAliases": [
        "date-range-picker"
      ],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Dialog",
      "category": "Overlays",
      "slug": "dialog",
      "element": "<dialog>",
      "summary": "showModal(): focus trap, top layer, and ::backdrop, free.",
      "status": "available",
      "reactExports": [
        "Dialog"
      ],
      "elementTag": "kernel-dialog",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/dialog/",
      "shadcnAliases": [
        "dialog",
        "alert-dialog"
      ],
      "radixPackages": [
        "@radix-ui/react-dialog",
        "@radix-ui/react-alert-dialog"
      ],
      "migrationCaveats": [
        "Kernel Dialog is a single component with title/description/children props — not Dialog.Root/Trigger/Portal/Content.",
        "shadcn Alert Dialog is this component with closeOnBackdropClick={false}. shadcn Sheet is Kernel Sheet, which adds drag-to-dismiss on top of this."
      ]
    },
    {
      "name": "Dropdown Menu",
      "category": "Overlays",
      "slug": "dropdown-menu",
      "element": "popover + role=\"menu\"",
      "summary": "Anchor-positioned menu with arrow-key navigation.",
      "status": "available",
      "reactExports": [
        "DropdownMenu",
        "DropdownMenuMorph",
        "MenuItem",
        "MenuSeparator"
      ],
      "elementTag": "kernel-dropdown-menu",
      "elementSubTags": [
        "kernel-dropdown-menu-morph",
        "kernel-menu-item",
        "kernel-menu-separator"
      ],
      "docsUrl": "https://www.kernelui.com/components/dropdown-menu/",
      "shadcnAliases": [
        "dropdown-menu",
        "menubar"
      ],
      "radixPackages": [
        "@radix-ui/react-dropdown-menu",
        "@radix-ui/react-menubar"
      ],
      "migrationCaveats": [
        "Use render prop instead of asChild on the trigger: <DropdownMenu render={<Button />}>."
      ]
    },
    {
      "name": "File Diff",
      "category": "AI",
      "slug": "file-diff",
      "element": "<details> + <table>",
      "summary": "File changes as a real table, with live counts and progressive rows.",
      "status": "available",
      "reactExports": [
        "FileDiff"
      ],
      "elementTag": "kernel-file-diff",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/file-diff/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "File Upload",
      "category": "Forms",
      "slug": "file-upload",
      "element": "<label> + <input type=\"file\">",
      "summary": "Drag-and-drop over a real file input, with optional square image preview moulding.",
      "status": "available",
      "reactExports": [
        "FileUpload"
      ],
      "elementTag": "kernel-file-upload",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/file-upload/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Footer",
      "category": "Layout",
      "slug": "footer",
      "element": "<footer>",
      "summary": "The contentinfo landmark.",
      "status": "available",
      "reactExports": [
        "Footer"
      ],
      "elementTag": "kernel-footer",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/footer/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Header",
      "category": "Layout",
      "slug": "header",
      "element": "<header>",
      "summary": "The banner landmark.",
      "status": "available",
      "reactExports": [
        "Header"
      ],
      "elementTag": "kernel-header",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/header/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Hover Card",
      "category": "Overlays",
      "slug": "hover-card",
      "element": "popover=hint / interestfor",
      "summary": "Rich hover preview, a heavier Tooltip.",
      "status": "available",
      "reactExports": [
        "HoverCard"
      ],
      "elementTag": "kernel-hover-card",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/hover-card/",
      "shadcnAliases": [
        "hover-card"
      ],
      "radixPackages": [
        "@radix-ui/react-hover-card"
      ],
      "migrationCaveats": []
    },
    {
      "name": "Input OTP",
      "category": "Forms",
      "slug": "input-otp",
      "element": "a row of real <input>",
      "summary": "One-time-code entry with roving focus.",
      "status": "available",
      "reactExports": [
        "InputOTP"
      ],
      "elementTag": "kernel-input-otp",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/input-otp/",
      "shadcnAliases": [
        "input-otp"
      ],
      "radixPackages": [
        "input-otp"
      ],
      "migrationCaveats": []
    },
    {
      "name": "Label",
      "category": "Primitives",
      "slug": "label",
      "element": "<label>",
      "summary": "A standalone label for custom composed controls.",
      "status": "available",
      "reactExports": [
        "Label"
      ],
      "elementTag": "kernel-label",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/label/",
      "shadcnAliases": [
        "label"
      ],
      "radixPackages": [
        "@radix-ui/react-label"
      ],
      "migrationCaveats": []
    },
    {
      "name": "Message",
      "category": "AI",
      "slug": "message",
      "element": "<ol> + <li> + <article>",
      "summary": "Conversation rows: authored, grouped, aligned, optionally expandable.",
      "status": "available",
      "reactExports": [
        "MessageList",
        "Message",
        "MessageBubble"
      ],
      "elementTag": "kernel-message-list",
      "elementSubTags": [
        "kernel-message",
        "kernel-message-bubble"
      ],
      "docsUrl": "https://www.kernelui.com/components/message/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Message Scroller",
      "category": "AI",
      "slug": "message-scroller",
      "element": "role=\"log\" overflow container",
      "summary": "Follows streamed output at the live edge, and lets go when the reader scrolls away.",
      "status": "available",
      "reactExports": [
        "MessageScroller",
        "useStickToBottom",
        "StickToBottomController"
      ],
      "elementTag": "kernel-message-scroller",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/message-scroller/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Nav",
      "category": "Layout",
      "slug": "nav",
      "element": "<nav> + <ul>",
      "summary": "Active state via aria-current, no client JS.",
      "status": "available",
      "reactExports": [
        "Nav",
        "NavLink"
      ],
      "elementTag": "kernel-nav",
      "elementSubTags": [
        "kernel-nav-link"
      ],
      "docsUrl": "https://www.kernelui.com/components/nav/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Navigation Menu",
      "category": "Overlays",
      "slug": "navigation-menu",
      "element": "<nav> + nested disclosure",
      "summary": "Multi-level site navigation, mega-menu via popover.",
      "status": "available",
      "reactExports": [
        "NavigationMenu",
        "NavigationMenuItem",
        "NavigationMenuLink",
        "NavigationMenuTrigger",
        "NavigationMenuContent"
      ],
      "elementTag": "kernel-navigation-menu",
      "elementSubTags": [
        "kernel-nav-menu-item",
        "kernel-nav-menu-link",
        "kernel-nav-menu-trigger",
        "kernel-nav-menu-content"
      ],
      "docsUrl": "https://www.kernelui.com/components/navigation-menu/",
      "shadcnAliases": [
        "navigation-menu"
      ],
      "radixPackages": [
        "@radix-ui/react-navigation-menu"
      ],
      "migrationCaveats": []
    },
    {
      "name": "Number Field",
      "category": "Forms",
      "slug": "number-field",
      "element": "<input type=\"number\"> + native stepUp()/stepDown()",
      "summary": "TextField's scaffold, specialised for numbers.",
      "status": "available",
      "reactExports": [
        "NumberField"
      ],
      "elementTag": "kernel-number-field",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/number-field/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Pagination",
      "category": "Navigation",
      "slug": "pagination",
      "element": "<nav aria-label=\"pagination\"> + <ol>",
      "summary": "Ordered page links, aria-current for the active one.",
      "status": "available",
      "reactExports": [
        "Pagination",
        "PaginationItem",
        "PaginationPrevious",
        "PaginationNext",
        "PaginationEllipsis"
      ],
      "elementTag": "kernel-pagination",
      "elementSubTags": [
        "kernel-pagination-item",
        "kernel-pagination-previous",
        "kernel-pagination-next",
        "kernel-pagination-ellipsis"
      ],
      "docsUrl": "https://www.kernelui.com/components/pagination/",
      "shadcnAliases": [
        "pagination"
      ],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Popover",
      "category": "Overlays",
      "slug": "popover",
      "element": "popover + anchor positioning",
      "summary": "Anchor-positioned floating panel.",
      "status": "available",
      "reactExports": [
        "Popover"
      ],
      "elementTag": "kernel-popover",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/popover/",
      "shadcnAliases": [
        "popover"
      ],
      "radixPackages": [
        "@radix-ui/react-popover"
      ],
      "migrationCaveats": [
        "Use render prop on the trigger instead of asChild."
      ]
    },
    {
      "name": "Progress",
      "category": "Feedback",
      "slug": "progress",
      "element": "<progress>",
      "summary": "Reports its own value to assistive tech, natively.",
      "status": "available",
      "reactExports": [
        "Progress"
      ],
      "elementTag": "kernel-progress",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/progress/",
      "shadcnAliases": [
        "progress"
      ],
      "radixPackages": [
        "@radix-ui/react-progress"
      ],
      "migrationCaveats": []
    },
    {
      "name": "Radio Group",
      "category": "Primitives",
      "slug": "radio-group",
      "element": "<fieldset> + <input type=\"radio\">",
      "summary": "Grouped choice with native arrow-key roving.",
      "status": "available",
      "reactExports": [
        "RadioGroup",
        "RadioGroupItem"
      ],
      "elementTag": "kernel-radio-group",
      "elementSubTags": [
        "kernel-radio-group-item"
      ],
      "docsUrl": "https://www.kernelui.com/components/radio-group/",
      "shadcnAliases": [
        "radio-group"
      ],
      "radixPackages": [
        "@radix-ui/react-radio-group"
      ],
      "migrationCaveats": []
    },
    {
      "name": "Reasoning",
      "category": "AI",
      "slug": "reasoning",
      "element": "<details> + <summary>",
      "summary": "A collapsible AI reasoning trace that auto-opens while streaming.",
      "status": "available",
      "reactExports": [
        "Reasoning"
      ],
      "elementTag": "kernel-reasoning",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/reasoning/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Resizable",
      "category": "Layout",
      "slug": "resizable",
      "element": "CSS resize / pointer-driven splitters",
      "summary": "Pane-to-pane split layouts.",
      "status": "available",
      "reactExports": [
        "Resizable"
      ],
      "elementTag": "kernel-resizable",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/resizable/",
      "shadcnAliases": [
        "resizable"
      ],
      "radixPackages": [
        "react-resizable-panels"
      ],
      "migrationCaveats": []
    },
    {
      "name": "Scroll Area",
      "category": "Layout",
      "slug": "scroll-area",
      "element": "native scroll + scrollbar-gutter",
      "summary": "Custom scrollbar styling as enhancement only.",
      "status": "available",
      "reactExports": [
        "ScrollArea"
      ],
      "elementTag": "kernel-scroll-area",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/scroll-area/",
      "shadcnAliases": [
        "scroll-area"
      ],
      "radixPackages": [
        "@radix-ui/react-scroll-area"
      ],
      "migrationCaveats": []
    },
    {
      "name": "Select",
      "category": "Forms",
      "slug": "select",
      "element": "<select>",
      "summary": "The platform's own picker UI, on every device.",
      "status": "available",
      "reactExports": [
        "Select",
        "SelectOption"
      ],
      "elementTag": "kernel-select",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/select/",
      "shadcnAliases": [
        "select"
      ],
      "radixPackages": [
        "@radix-ui/react-select"
      ],
      "migrationCaveats": [
        "Kernel Select wraps a native <select> — the OS renders the picker.",
        "Custom portal/listbox Select from Radix usually maps to Combobox instead.",
        "Use SelectOption (or real <option> in elements) instead of SelectItem."
      ]
    },
    {
      "name": "Separator",
      "category": "Primitives",
      "slug": "separator",
      "element": "<hr>",
      "summary": "A divider that's already role=\"separator\".",
      "status": "available",
      "reactExports": [
        "Separator"
      ],
      "elementTag": "kernel-separator",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/separator/",
      "shadcnAliases": [
        "separator"
      ],
      "radixPackages": [
        "@radix-ui/react-separator"
      ],
      "migrationCaveats": []
    },
    {
      "name": "Sheet",
      "category": "Overlays",
      "slug": "sheet",
      "element": "<dialog> + pointer events",
      "summary": "A Dialog anchored to an edge, with drag-to-dismiss.",
      "status": "available",
      "reactExports": [
        "Sheet",
        "useSheetDrag"
      ],
      "elementTag": "kernel-sheet",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/sheet/",
      "shadcnAliases": [
        "sheet",
        "drawer"
      ],
      "radixPackages": [
        "vaul"
      ],
      "migrationCaveats": [
        "Replaces Vaul: Drawer.Root/Trigger/Portal/Overlay/Content/Handle collapse into one <Sheet> with open/onOpenChange, since a real <dialog> needs no portal and draws its own ::backdrop.",
        "Vaul's snapPoints becomes snapPoints (viewport percentages) and activeSnapPoint becomes snap/defaultSnap/onSnapChange; snapping works on every side, as a percentage of the axis the sheet grows along.",
        "direction becomes side; dismissible and handleOnly keep their names; closeThreshold keeps Vaul's 0.25, but velocityThreshold is 0.5 because release speed is measured over a window rather than the whole gesture."
      ]
    },
    {
      "name": "Sidebar",
      "category": "Layout",
      "slug": "sidebar",
      "element": "<aside>",
      "summary": "The complementary landmark.",
      "status": "available",
      "reactExports": [
        "Sidebar"
      ],
      "elementTag": "kernel-sidebar",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/sidebar/",
      "shadcnAliases": [
        "sidebar"
      ],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Skeleton",
      "category": "Feedback",
      "slug": "skeleton",
      "element": "<div aria-hidden=\"true\">",
      "summary": "Loading placeholder tied to real content dimensions.",
      "status": "available",
      "reactExports": [
        "Skeleton"
      ],
      "elementTag": "kernel-skeleton",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/skeleton/",
      "shadcnAliases": [
        "skeleton"
      ],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Slider",
      "category": "Forms",
      "slug": "slider",
      "element": "<input type=\"range\">",
      "summary": "Custom-painted thumb, native drag and keyboard behaviour.",
      "status": "available",
      "reactExports": [
        "Slider"
      ],
      "elementTag": "kernel-slider",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/slider/",
      "shadcnAliases": [
        "slider"
      ],
      "radixPackages": [
        "@radix-ui/react-slider"
      ],
      "migrationCaveats": []
    },
    {
      "name": "Sources",
      "category": "AI",
      "slug": "sources",
      "element": "<section> + <ul> of <a>",
      "summary": "Cited sources and inline numbered citation chips for grounded answers.",
      "status": "available",
      "reactExports": [
        "Sources",
        "Source",
        "Citation"
      ],
      "elementTag": "kernel-sources",
      "elementSubTags": [
        "kernel-source",
        "kernel-citation"
      ],
      "docsUrl": "https://www.kernelui.com/components/sources/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Switch",
      "category": "Primitives",
      "slug": "switch",
      "element": "<button role=\"switch\">",
      "summary": "The WAI-ARIA switch pattern on a real button.",
      "status": "available",
      "reactExports": [
        "Switch"
      ],
      "elementTag": "kernel-switch",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/switch/",
      "shadcnAliases": [
        "switch"
      ],
      "radixPackages": [
        "@radix-ui/react-switch"
      ],
      "migrationCaveats": [
        "onCheckedChange naming matches Radix."
      ]
    },
    {
      "name": "Suggestion",
      "category": "AI",
      "slug": "suggestion",
      "element": "<ul role=\"list\"> of <button>",
      "summary": "Prompt suggestion chips that seed the next composer message.",
      "status": "available",
      "reactExports": [
        "Suggestion",
        "SuggestionItem"
      ],
      "elementTag": "kernel-suggestion",
      "elementSubTags": [
        "kernel-suggestion-item"
      ],
      "docsUrl": "https://www.kernelui.com/components/suggestion/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Table",
      "category": "Data Display",
      "slug": "table",
      "element": "<table>",
      "summary": "Sortable headers, real <caption>, real <th scope>.",
      "status": "available",
      "reactExports": [
        "Table",
        "TableCaption",
        "TableHeader",
        "TableBody",
        "TableRow",
        "TableHead",
        "TableCell"
      ],
      "elementTag": "kernel-table",
      "elementSubTags": [
        "kernel-table-caption",
        "kernel-table-header",
        "kernel-table-body",
        "kernel-table-row",
        "kernel-table-head",
        "kernel-table-cell"
      ],
      "docsUrl": "https://www.kernelui.com/components/table/",
      "shadcnAliases": [
        "table"
      ],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Tabs",
      "category": "Navigation",
      "slug": "tabs",
      "element": "role=\"tablist\"",
      "summary": "No native element exists yet, ARIA APG pattern.",
      "status": "available",
      "reactExports": [
        "Tabs",
        "TabsList",
        "Tab",
        "TabPanel"
      ],
      "elementTag": "kernel-tabs",
      "elementSubTags": [
        "kernel-tabs-list",
        "kernel-tab",
        "kernel-tab-panel"
      ],
      "docsUrl": "https://www.kernelui.com/components/tabs/",
      "shadcnAliases": [
        "tabs"
      ],
      "radixPackages": [
        "@radix-ui/react-tabs"
      ],
      "migrationCaveats": [
        "value/onValueChange API matches Radix; subcomponent names differ (Tab vs TabsTrigger)."
      ]
    },
    {
      "name": "Tag Input",
      "category": "Forms",
      "slug": "tag-input",
      "element": "role=\"list\" of removable tags + trailing <input>",
      "summary": "Freeform text that commits into discrete, removable tags.",
      "status": "available",
      "reactExports": [
        "TagInput"
      ],
      "elementTag": "kernel-tag-input",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/tag-input/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Text Field",
      "category": "Forms",
      "slug": "text-field",
      "element": "<label> + <input>",
      "summary": "Correct labelling and live validation styling.",
      "status": "available",
      "reactExports": [
        "TextField"
      ],
      "elementTag": "kernel-text-field",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/text-field/",
      "shadcnAliases": [
        "input"
      ],
      "radixPackages": [],
      "migrationCaveats": [
        "label is required — use hideLabel for visually hidden labels.",
        "shadcn Input without a label needs a TextField with label + hideLabel."
      ]
    },
    {
      "name": "Textarea",
      "category": "Forms",
      "slug": "textarea",
      "element": "<textarea>",
      "summary": "Auto-growing with field-sizing: content.",
      "status": "available",
      "reactExports": [
        "Textarea"
      ],
      "elementTag": "kernel-textarea",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/textarea/",
      "shadcnAliases": [
        "textarea"
      ],
      "radixPackages": [],
      "migrationCaveats": [
        "label is required — same form-field scaffold as TextField."
      ]
    },
    {
      "name": "Thinking Indicator",
      "category": "AI",
      "slug": "thinking-indicator",
      "element": "role=\"status\"",
      "summary": "The universal typing-indicator dots, next to real visible text.",
      "status": "available",
      "reactExports": [
        "ThinkingIndicator"
      ],
      "elementTag": "kernel-thinking-indicator",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/thinking-indicator/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Toast",
      "category": "Feedback",
      "slug": "toast",
      "element": "role=\"status\" / role=\"alert\" (queued)",
      "summary": "A shared, queued live region.",
      "status": "available",
      "reactExports": [
        "ToastViewport",
        "toast"
      ],
      "elementTag": "kernel-toast-viewport",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/toast/",
      "shadcnAliases": [
        "toast",
        "sonner"
      ],
      "radixPackages": [
        "@radix-ui/react-toast",
        "sonner"
      ],
      "migrationCaveats": [
        "Mount <ToastViewport /> once, then call toast() from anywhere — similar to Sonner."
      ]
    },
    {
      "name": "Toggle",
      "category": "Primitives",
      "slug": "toggle",
      "element": "<button aria-pressed>",
      "summary": "A two-state toggle that looks and acts like a button.",
      "status": "available",
      "reactExports": [
        "Toggle"
      ],
      "elementTag": "kernel-toggle",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/toggle/",
      "shadcnAliases": [
        "toggle",
        "toggle-group"
      ],
      "radixPackages": [
        "@radix-ui/react-toggle",
        "@radix-ui/react-toggle-group"
      ],
      "migrationCaveats": []
    },
    {
      "name": "Todo List",
      "category": "AI",
      "slug": "todo-list",
      "element": "<details> + <ol>",
      "summary": "An agent's task plan, with cross-fading status marks and a live completion count.",
      "status": "available",
      "reactExports": [
        "TodoList",
        "TodoItem"
      ],
      "elementTag": "kernel-todo-list",
      "elementSubTags": [
        "kernel-todo-item"
      ],
      "docsUrl": "https://www.kernelui.com/components/todo-list/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Tool Call",
      "category": "AI",
      "slug": "tool-call",
      "element": "<details> + <summary>",
      "summary": "Collapsible agent tool status with pending, running, complete, and error states.",
      "status": "available",
      "reactExports": [
        "ToolCall"
      ],
      "elementTag": "kernel-tool-call",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/tool-call/",
      "shadcnAliases": [],
      "radixPackages": [],
      "migrationCaveats": []
    },
    {
      "name": "Tooltip",
      "category": "Overlays",
      "slug": "tooltip",
      "element": "popover + interestfor",
      "summary": "Hover/focus hints via the Popover API.",
      "status": "available",
      "reactExports": [
        "Tooltip"
      ],
      "elementTag": "kernel-tooltip",
      "elementSubTags": [],
      "docsUrl": "https://www.kernelui.com/components/tooltip/",
      "shadcnAliases": [
        "tooltip"
      ],
      "radixPackages": [
        "@radix-ui/react-tooltip"
      ],
      "migrationCaveats": [
        "Use render prop on the trigger instead of asChild."
      ]
    }
  ]
}