Head to head
Refero Styles vs shadcn/ui
Refero Styles and shadcn/ui solve the same job (Core design stack), so this is a pick-one decision.
| Field | Refero Stylesstyles.refero.design Not yet swept | shadcn/uiui.shadcn.com Not yet swept |
|---|---|---|
| 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. | 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 |
| Cost tier | free | free |
| Pricing | Free (beta) · parent site $12/mo | Free · MIT |
| 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. | 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 | not logged | not logged |
| How to wire it up | paste DESIGN.md into project context | npx shadcn@latest mcp init --client claude |
| Editor's pick | Yes | Yes |
Other matchups worth running
Agent endpoint: GET /api/public/compare?slugs=refero-styles,shadcn-ui