The same components, same copy — each rendered in a real framework's CDN CSS, in its own idiom. This is the aesthetic comparison: which gives speed without the "built-with-AI" look, and which we'd dovetail a Style Guide into. (Each scrolls; open any full-screen.)
shadcn/ui
the "AI look"Tailwind + Radix. Beautiful but now ubiquitous — this is the homogenised aesthetic to avoid. React-only in reality.Full screen ↗
daisyUI
themeable · CSSTailwind plugin, semantic classes, themeable via CSS vars (great for dovetailing a Style Guide). Friendlier, less ubiquitous. Works without React.Full screen ↗
Pico CSS
classless · elegantStyles semantic HTML directly — almost no classes. Elegant, minimal, very "not overused", extremely fast. Fewer components out of the box.Full screen ↗
Bulma
friendly · CSSMature CSS framework, friendly/rounded, distinct from Bootstrap. Sass/CSS-var themeable. Pure CSS, no JS.Full screen ↗
Bootstrap 5
the old genericThe familiar, dated default — included as the reference point we're moving away from.Full screen ↗
Open Props
tokens · the dovetail ideaDesign TOKENS only — you compose components from its variables. This is "a style guide dovetails into the library", natively. Modern, fresh, no build.Full screen ↗
UIkit
clean · editorialClean, professional, slightly editorial. Distinct from the Tailwind crowd, pure-CSS components.Full screen ↗
Beer CSS
Material 3Google's Material Design 3 — rounded, elevated, a totally different "feel". Themeable; needs a little JS.Full screen ↗
Shoelace
web componentsFramework-agnostic web components (sl-*) — polished, distinct, themeable via CSS vars, works in any runtime including PHP/Twig.Full screen ↗
Simple.css
classless · warmClassless like Pico, but warmer and wider. Semantic HTML, near-zero effort, distinct.Full screen ↗
Ours (carwash-demo)
our library + automotive SGOur component library dressed in the captured automotive Style Guide — for direct comparison. (Where we are now.)Full screen ↗