Head to head
Stop guessing which one. Put them side by side.
Up to 4 tools, same rows for each: what it is, what it really costs, the trap, and how to wire it up. The URL carries your picks — send it to anyone.
Radix UI PrimitivesRefero Stylesshadcn/ui
Quick read
- Editor's picks: Refero Styles, shadcn/ui.
- No logged gotchas: Refero Styles, shadcn/ui.
| Field | Radix UI Primitivesradix-ui.com | Refero Stylesstyles.refero.design | shadcn/uiui.shadcn.com |
|---|---|---|---|
| What it is | Unstyled, behavior-only components — Dialog, Popover, Select, Dropdown — with focus traps, keyboard nav and ARIA solved. Zero CSS opinions, so no Tailwind conflict. Maintained by WorkOS. You already have it transitively via shadcn. | 2,000+ design systems reverse-extracted from real production sites and packaged as structured DESIGN.md files documenting colors, typography, spacing and motion. Filter by brand, mood (minimal, editorial, playful), palette or typeface. | 50+ accessible components built on Radix (now Base UI by default) and Tailwind, distributed as source copied into your repo rather than an npm dependency. Also ships Blocks, Charts, a Themes browser, and the registry protocol. 121k stars. |
| Category | Core design stack | Core design stack | Core design stack |
| Cost tier | free | free | free |
| Pricing | Free · MIT | Free (beta) · parent site $12/mo | Free · MIT |
| Why builders pick it | Reach for it when your project needs a component shadcn does not ship — an issue-picker combobox, a lightbox with proper focus management, a filter drawer. Accessibility on a publication site is not optional. | The single highest-leverage free thing on this list. Instead of telling Claude 'make it feel editorial', hand it exact tokens from a site whose type you admire. Filter by the editorial mood, paste the DESIGN.md as project context, then have Lovable generate to those tokens. An official Refero MCP and two community MCP servers exist. | This is already your project. The reason it matters strategically: React Bits, 21st.dev, Magic UI, Kokonut and ElevenLabs UI all publish into its registry, so wiring the official shadcn MCP once gives Claude an install path into every one of them. |
| Watch out for | Use Primitives, not Radix Themes — Themes brings its own CSS reset and token system and will fight your Tailwind setup. Also note shadcn defaulted to Base UI in July 2026; do not run both primitive layers. | not logged | not logged |
| How to wire it up | npm install radix-ui | paste DESIGN.md into project context | npx shadcn@latest mcp init --client claude |
| Editor's pick | No | Yes | Yes |
Which one did you ship?
The grid says what these tools are. This says what builders did about it — one decision per person, changeable whenever you change your mind.
0/280Sign in to add yours.
Or try
Hand this to your Lovable agent
# Tool comparison — Radix UI Primitives vs Refero Styles vs shadcn/ui Source: Kbaise, a directory of tools that work with Lovable projects. Pick one and tell me why before writing any integration code. ## Radix UI Primitives (radix-ui-primitives) - URL: https://www.radix-ui.com/ - Category: Core design stack - Cost: free — Free · MIT - What it is: Unstyled, behavior-only components — Dialog, Popover, Select, Dropdown — with focus traps, keyboard nav and ARIA solved. Zero CSS opinions, so no Tailwind conflict. Maintained by WorkOS. You already have it transitively via shadcn. - Why builders pick it: Reach for it when your project needs a component shadcn does not ship — an issue-picker combobox, a lightbox with proper focus management, a filter drawer. Accessibility on a publication site is not optional. - Trap: Use Primitives, not Radix Themes — Themes brings its own CSS reset and token system and will fight your Tailwind setup. Also note shadcn defaulted to Base UI in July 2026; do not run both primitive layers. - Wiring: npm install radix-ui - Full dossier: /api/public/tools/radix-ui-primitives ## Refero Styles (refero-styles) - URL: https://styles.refero.design/ - Category: Core design stack - Cost: free — Free (beta) · parent site $12/mo - What it is: 2,000+ design systems reverse-extracted from real production sites and packaged as structured DESIGN.md files documenting colors, typography, spacing and motion. Filter by brand, mood (minimal, editorial, playful), palette or typeface. - Why builders pick it: The single highest-leverage free thing on this list. Instead of telling Claude 'make it feel editorial', hand it exact tokens from a site whose type you admire. Filter by the editorial mood, paste the DESIGN.md as project context, then have Lovable generate to those tokens. An official Refero MCP and two community MCP servers exist. - Wiring: paste DESIGN.md into project context - Full dossier: /api/public/tools/refero-styles ## shadcn/ui (shadcn-ui) - URL: https://ui.shadcn.com/ - Category: Core design stack - Cost: free — Free · MIT - What it is: 50+ accessible components built on Radix (now Base UI by default) and Tailwind, distributed as source copied into your repo rather than an npm dependency. Also ships Blocks, Charts, a Themes browser, and the registry protocol. 121k stars. - Why builders pick it: This is already your project. The reason it matters strategically: React Bits, 21st.dev, Magic UI, Kokonut and ElevenLabs UI all publish into its registry, so wiring the official shadcn MCP once gives Claude an install path into every one of them. - Wiring: npx shadcn@latest mcp init --client claude - Full dossier: /api/public/tools/shadcn-ui ## Quick read - Editor's picks: Refero Styles, shadcn/ui. - No logged gotchas: Refero Styles, shadcn/ui. ## Rules 1. Prefer the free tier when no budget was stated, and say what the ceiling is. 2. Read the full dossier before integrating. 3. Fetch /api/public/models before writing any AI model ID.
Agents can fetch the same thing: GET /api/public/compare?slugs=radix-ui-primitives,refero-styles,shadcn-ui