chakra-ui-solid
An independent SolidJS 2.0 component library targeting Chakra UI v3's component API and design system. Styles are compiled at build time; nothing generates CSS while your app is running.
It is as close to Chakra v3 parity as is achievable without runtime CSS-in-JS — not a 1:1 port, and it does not pretend to be one.
Before you install
- SolidJS 2.0. Not 1.x — the packages import
@solidjs/web, and a 1.x install fails at load. - Requires Panda CSS in your build. Not optional — this library publishes no CSS. Your Panda run reads your source and writes your stylesheet; there is no supported way to use this library without one.
- ESM only.
What you get, and what you do not
You get
- Chakra v3's component API
- Its design system, through the official Panda preset
- Zag.js behavior and ARIA
- Style props, recipes and variants
You do not get
- Runtime theming — no createSystem
- Style-prop values computed at runtime
- asChild — polymorphism is a render prop
Install
pnpm add @chakra-ui-solid/components @chakra-ui-solid/preset @chakra-ui-solid/styled-system
pnpm add -D @pandacss/devThe install page has the Panda config, the verification step, and what to check when everything renders naked.
Where to go next
- Installation — the config, and how to tell it worked.
- Components — what has shipped so far.
What is not here yet
This library is being built one batch at a time, and the docs are built with it — a component gets its page in the same phase it ships, so anything missing from the sidebar has not been written rather than gone undocumented.
Charts are excluded outright, and the reason is a dependency one rather than a styling one: Chakra's chart tier peer-depends on Recharts and React, and there is no Solid charting substrate to bind to.