Kobalte

Kobalte is the accessibility foundation for SolidJS: unstyled, WAI-ARIA compliant primitives built around signals rather than React state. It is the default base layer for anyone building a design system in Solid.

At a glance

Install	npm install @kobalte/core
Styling	none, data attributes for every state
Reactivity	Solid signals, no virtual DOM reconciliation
MCP server	not published, llms.txt available
License	MIT

Install

npm install @kobalte/core

What the code looks like

If you know Radix, this will read almost identically. That is deliberate, and it makes porting a React design system to Solid unusually cheap.

import { Dialog } from "@kobalte/core/dialog"

<Dialog>
  <Dialog.Trigger class="btn">Rename</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay class="overlay" />
    <Dialog.Content class="panel">
      <Dialog.Title>Rename project</Dialog.Title>
      <Dialog.CloseButton class="btn">Cancel</Dialog.CloseButton>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog>

States surface as data attributes (data-expanded, data-disabled, data-highlighted), so styling is pure CSS with no reactive plumbing.

Ecosystem reality check

Solid is a small ecosystem, and Kobalte is its main accessibility layer rather than one option among several. That is a strength for coherence and a risk for bus factor: there is no second implementation to fall back on. Weigh that before committing a long-lived product.

Choose it if

• You are building in Solid and need accessible primitives.
• You are porting a Radix-based design system and want the API to feel familiar.

Look elsewhere if

• You want alternatives within the same framework. Ark UI also ships a Solid binding.
• Community size matters to your risk assessment. This is the smallest project in this directory by stars.