Kobalte

Kobalte is a UI toolkit that gives SolidJS applications a full set of unstyled, accessible components and primitives — accordions, dialogs, comboboxes, selects, menus, sliders, toasts, and more — each implemented against WAI-ARIA Authoring Practices so keyboard interaction, focus management, and screen-reader semantics come built in rather than bolted on afterward.

Rather than shipping opinionated CSS, every component exposes its interaction state through data-* attributes, which pairs directly with the companion @kobalte/tailwindcss plugin (or plain CSS) so teams can build a fully custom design system on top of accessible, tested behavior instead of re-implementing it from scratch. It fills the same role for SolidJS that Radix UI and React Aria fill for React.

What You Get

• 30+ compound components covering forms, overlays, navigation, and feedback (Accordion, Combobox, Dialog, DropdownMenu, Menubar, NumberField, Popover, Select, Slider, Tabs, Toast, Tooltip, and more)
• Shared low-level primitives (create-focus-scope, create-collection, create-escape-key-down, dismissable-layer, popper positioning) that every component is built from and that consumers can reuse directly
• A polymorphic as/asChild-style rendering API so any sub-part can render as a different element or custom component without losing behavior
• First-class form integration via a shared form-control context (validation state, required/disabled propagation, error messaging) across all form-like components
• Built-in internationalization (RTL support, localized number/date parsing via @internationalized/number) and a live-announcer for assistive-technology status updates
• An official @kobalte/tailwindcss plugin for styling components’ data-state attributes with Tailwind modifiers, alongside a vanilla-extract plugin for CSS-in-JS setups

Common Use Cases

• Building an in-house design system for a SolidJS product without hand-rolling ARIA-compliant dialogs, menus, and form controls
• Replacing native <select>/<input> elements with fully styleable, keyboard-accessible Combobox, Select, and NumberField components
• Composing complex overlay UI (nested menus, popovers, tooltips, dismissable modals) that correctly manages focus and escape/outside-click behavior
• Adding toast notifications, accordions, and disclosure widgets that meet WCAG keyboard and screen-reader expectations out of the box
• Adopting a consistent, accessible component API across a component library that still needs a fully custom visual theme

Under The Hood

Architecture The monorepo (managed with pnpm workspaces + Turborepo) separates @kobalte/core from @kobalte/utils (shared helpers), @kobalte/tailwindcss, and @kobalte/vanilla-extract (styling plugins), with each of the 30+ components living in its own src/<component>/ directory built from a consistent root/sub-part decomposition (e.g. select-root.tsx, select-trigger.tsx, select-content.tsx, select-context.tsx) that shares state through Solid context rather than prop drilling. Cross-cutting behavior — focus scoping, dismissable layers, DOM collections for keyboard navigation, escape-key handling, popper-style positioning — is factored into a src/primitives/ layer (create-focus-scope, create-collection, create-escape-key-down, create-hide-outside) that every component composes rather than reimplements, which is the core architectural bet: change a primitive once and every consuming component inherits the fix.

Tech Stack Written in TypeScript on SolidJS (peer dependency solid-js ^1.9.8), using @floating-ui/dom for overlay positioning, @internationalized/number for locale-aware number parsing, and small solid-primitives/solid-presence/solid-prevent-scroll packages for reactive utilities. The package builds with tsup (targeting both JS and Solid-preserving JSX output for solid conditional exports), development/demos run through Vite, and the whole monorepo is orchestrated by Turborepo with Changesets for release/versioning.

Code Quality The package ships 37+ component-level test files run with Vitest and @solidjs/testing-library, exercising keyboard interaction, pointer events, and ARIA attribute output rather than just render smoke tests. Biome enforces linting/formatting across the monorepo (with a handful of explicitly-disabled a11y/style rules documented in biome.json), and GitHub Actions workflows run build, test, and format checks on every change. Types are strict TypeScript throughout with no any-heavy escape hatches in the public API surface.

API Design Every component follows the same compound-component shape (Root, Trigger, Content, Label, etc.) regardless of complexity, so learning one component’s API substantially transfers to the next; state is surfaced via data-* attributes (data-expanded, data-highlighted) rather than className toggling, which is what lets the companion Tailwind plugin style state with simple modifiers instead of JS-driven class logic. This is a deliberate, well-executed port of the Radix UI / React Aria API shape into SolidJS’s reactivity model rather than a novel interaction paradigm — its value is bringing an already-proven accessible-component API to a framework that lacked one.