One machine, every framework
Components with the hard parts done.
- Components
- 25
- Headless
- 100%
- Works with
- React, Vue, Svelte, Solid, Preact and Vanilla JS
Your stack
Tell us how you build.
Four quick questions. We remember your answers in this browser, and every docs page opens with the matching framework, styles, install steps and guide.
Show me the docsBrains are behavior, bones are markup, and your styles are the skin. Borrowed from Adam Argyle’s Headless, boneless, skinless & lifeless UI, where the brains are called life.
Just the brains: Zag
Zag is the behavior: framework-agnostic state machines that handle pointer, keyboard, focus and ARIA. It renders nothing, so you write the markup and spread its props onto your own elements.
The article calls this lifeless UI: just the behavior, bring your own bones and skin.
Bones and brains: Ark UI
Ark UI wraps the same Zag machines in accessible, unstyled component parts for React, Solid, Vue and Svelte. The markup and the behavior come included.
The article calls this headless UI: working components, bring your own style.
Tools
Panda CSS on Turbopack, without the CLI.
@isbatak/panda-turbopack runs Panda CSS v2 inside next dev and next build. Wrap your config once and drop the watch process and the PostCSS plugin.
- Codegen runs when Next.js loads the config
- The generated CSS updates as you edit
- Style props compile to static class names
import type { NextConfig } from "next"
import { withPandaCss } from "@isbatak/panda-turbopack/next"
const nextConfig: NextConfig = {}
export default withPandaCss(nextConfig)@layer reset, base, tokens, recipes, utilities;Sponsors
The sponsor wall is open.
Every seat below is still up for grabs. Sponsorship pays for the slow parts: edge cases, accessibility passes and keeping React, Vue, Svelte, Solid, Preact and vanilla JS in lockstep.
Missing a widget in your stack? Sponsoring is the shortest path from “someone should build this” to a component that runs in every framework, and in none at all.
Become a sponsor