Headless · design system optional
Headless React components, and a design system when you want one.
Fragiola is an ecosystem of headless components: primitives that own behaviour, state and accessibility, and ship no styles. Fragiola UI, an optional and malleable design system, gives them one visual identity — or paint them with whatever you already use.
The idea
The behaviour from us, the look from wherever you like
A Fragiola primitive ships what a component does — its state, its keyboard, its accessibility — and nothing of how it looks. The look is yours: a design system of ours, one you already use, or your own CSS.
Headless primitives
Behaviour, state and accessibility — keyboard support, focus, ARIA — and no styles at all. A primitive renders only what you give it and exposes its state as data attributes and ARIA, so any styling solution can paint it.An optional design system
Fragiola UI is the ecosystem's design system, and it bends: six colour roles, any number of palettes, each scoped by a class to a page, a card or a single button. Take it when you want one visual identity; nothing requires it.
Your stack
Paint it with what you already use
The primitives do not care who styles them. Pick the design system that fits your app, or none at all.
- Fragiola UI
- shadcn/ui
- daisyUI
- Tailwind
- Plain CSS
A state is a selector away: an open panel, a selected tab, a dragged item are all attributes on the element, ready for whichever CSS you write.
The design system
Fragiola UI
A copy-paste component library built on Base UI and Tailwind v4. Six colour roles, any number of palettes.
Base UI and Tailwind v4
Accessible building blocks from Base UI, painted with Tailwind v4 utilities.The code is yours
Installed with the shadcn CLI from the@fragiolaregistry: the components are copied into your app, to read and to change.Colour you can scope
Components read roles, never colours. A palette applied by class repaints a page, a card or one button, with no colour variant anywhere.
Projects
What Fragiola ships today
Each project has its docs and its live examples here, on one site.