Head to head
21st.dev vs Refero Styles
21st.dev and Refero Styles solve the same job (Core design stack), so this is a pick-one decision. If cost is the constraint, Refero Styles clears it without a card.
Quick read
- Free with no card: Refero Styles.
| Field | 21st.dev21st.dev Not yet swept | Refero Stylesstyles.refero.design Not yet swept |
|---|---|---|
| What it is | 12,000+ React/Tailwind components in native shadcn registry format, plus ~50 community themes, 29,000 searchable icons, shaders and gradients. Every item exposes an AI-ready prompt written specifically for Lovable, Cursor and Claude Code. | 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. |
| Category | Core design stack | Core design stack |
| Cost tier | mixed | free |
| Pricing | Free (2 copies/day) · $6/mo · $15/mo +AI | Free (beta) · parent site $12/mo |
| Why builders pick it | The themes page is the fastest visual win you have. A theme here is a shadcn token set — colors, type, radius. Copy the :root/.dark blocks into index.css and the whole app re-skins with zero component edits. Browse the themes page and pick one that matches the look you are already going for. | 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. |
| Watch out for | not logged | not logged |
| How to wire it up | npx @21st-dev/magic@latest | paste DESIGN.md into project context |
| Editor's pick | Yes | Yes |
Other matchups worth running
Agent endpoint: GET /api/public/compare?slugs=21st-dev,refero-styles