[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-categories-en-US":3,"categories-en-US":3,"resource-21st-dev-en-US":4,"featured-sidebar-data-en-US":3,"latest-resources-en-US":86,"alternatives-21st-dev-en-US":147,"related-resources-21st-dev-en-US":148},true,{"id":5,"name":6,"slug":7,"url":8,"date_updated":9,"images_other":9,"tagline":10,"description":11,"seo":12,"features":15,"pros":26,"cons":33,"best_for":38,"cover":39,"icon":9,"pricing":40,"platform":41,"github_url":43,"twitter_url":9,"discord_url":44,"dribbble_url":9,"pricing_tiers":45,"views_count":48,"featured_rank":9,"categories":49,"tags":62,"files":9},859,"21st.dev","21st-dev","https:\u002F\u002F21st.dev\u002F",null,"Hand-crafted React components and templates — not AI slop","21st.dev is a Y Combinator-backed community registry of production-ready React components and templates built on shadcn\u002Fui, Tailwind CSS, and Radix UI. Browse thousands of curated UI components — from navigation bars and hero sections to AI chat interfaces and data visualizations — install them with a single npx command, and own the code. Features include Magic Chat for AI-powered UI generation from natural language, Magic MCP for component generation directly inside AI IDEs like Cursor and Windsurf, a CLI for semantic search and one-command install, AI variant generation, component publishing, and an Agents SDK for deploying AI agents with sandboxed execution, streaming, and observability. Free tier includes 2 component copies per day and 100 monthly AI credits.",{"title":13,"meta_description":14},"21st.dev — Hand-Crafted React Components & Templates","21st.dev is a Y Combinator-backed community registry of production-ready React components built on shadcn\u002Fui and Tailwind CSS. Browse, install, and own thousands of curated UI components. Free tier available.",[16,17,18,19,20,21,22,23,24,25],"Community registry of thousands of hand-crafted React\u002FTailwind components","Magic Chat — AI-powered UI builder from natural language descriptions","Magic MCP — generate components directly inside Cursor, Windsurf, and other AI IDEs","One-command install via npx shadcn for any component","AI variant generation with side-by-side comparison","Component publishing with auto-detected name, tags, and demo","Agents SDK with sandboxed execution, streaming, auth, and observability","Semantic search across components, themes, and templates","Site clone — recreate any website design from a URL (Pro)","2 free component copies per day, 100 free monthly AI credits",[27,28,29,30,31,32],"Curated quality — real components, not AI-generated noise","Own the code with no vendor lock-in or runtime dependencies","Works seamlessly with AI coding assistants via MCP","Active community with thousands of components and templates","Free tier available with generous daily limits","Y Combinator-backed with active development",[34,35,36,37],"React-only — no support for Vue, Svelte, or other frameworks","Requires shadcn\u002Fui and Tailwind CSS setup in your project","Quality varies across community submissions","Daily copy limit on free tier (2 per day)","React developers and design engineers who want production-ready UI components they can install instantly and own, with the option to generate new components using AI coding assistants.","79e67612-7a6f-45be-a799-e872786fc4ed.webp","freemium",[42],"Web","https:\u002F\u002Fgithub.com\u002F21st-dev","https:\u002F\u002Fdiscord.gg\u002F21st-dev",{"pro":46,"free":3,"membership":47},20,8,0,[50,54,58],{"name":51,"slug":52,"sub_categories":53},"Design Tools","design-tools",[],{"name":55,"slug":56,"sub_categories":57},"Templates & UI Kits","templates-ui-kits",[],{"name":59,"slug":60,"sub_categories":61},"Design Systems","design-systems",[],[63,66,69,72,74,77,78,81,84],{"name":64,"slug":65},"AI Powered","ai-powered",{"name":67,"slug":68},"AI","ai",{"name":70,"slug":71},"Free","free",{"name":73,"slug":40},"Freemium",{"name":75,"slug":76},"UI Kits","ui-kits",{"name":59,"slug":60},{"name":79,"slug":80},"Prototyping","prototyping",{"name":82,"slug":83},"No Code","no-code",{"name":9,"slug":85},"productivity",[87,101,113,136],{"id":88,"url":89,"icon":9,"name":90,"slug":91,"tags":92,"cover":97,"tagline":98,"is_featured":99,"date_created":100,"date_updated":9},860,"https:\u002F\u002Fviewport-ui.design\u002F","Viewport UI","viewport-ui",[93,94,95],{"seo":9,"name":70,"slug":71},{"seo":9,"name":9,"slug":76},{"seo":9,"name":9,"slug":96},"inspiration","7a4e7938-e9b1-4f8b-9886-37b683ddd8f6.webp","UI curated experiences for your inspiration",false,"2026-07-07T06:28:48.469215+00:00",{"id":5,"url":8,"icon":9,"name":6,"slug":7,"tags":102,"cover":39,"tagline":10,"is_featured":99,"date_created":112,"date_updated":9},[103,104,105,106,107,108,109,110,111],{"seo":9,"name":64,"slug":65},{"seo":9,"name":9,"slug":68},{"seo":9,"name":70,"slug":71},{"seo":9,"name":73,"slug":40},{"seo":9,"name":9,"slug":76},{"seo":9,"name":9,"slug":60},{"seo":9,"name":9,"slug":80},{"seo":9,"name":9,"slug":83},{"seo":9,"name":9,"slug":85},"2026-07-07T06:23:36.061553+00:00",{"id":114,"url":115,"icon":9,"name":116,"slug":117,"tags":118,"cover":133,"tagline":134,"is_featured":99,"date_created":135,"date_updated":9},858,"https:\u002F\u002Fwww.genspark.ai\u002F","Genspark Design","genspark-design",[119,120,121,122,124,126,128,130,131,132],{"seo":9,"name":64,"slug":65},{"seo":9,"name":9,"slug":68},{"seo":9,"name":73,"slug":40},{"seo":9,"name":9,"slug":123},"free-trial",{"seo":9,"name":9,"slug":125},"image-editing",{"seo":9,"name":9,"slug":127},"video",{"seo":9,"name":9,"slug":129},"animation",{"seo":9,"name":9,"slug":80},{"seo":9,"name":9,"slug":83},{"seo":9,"name":9,"slug":85},"fc3931e4-3210-4155-a94b-da3a261fe281.webp","The next-gen AI for design — powered by Claude Opus 4.7","2026-06-28T03:12:01.911314+00:00",{"id":137,"url":138,"icon":9,"name":139,"slug":140,"tags":141,"cover":144,"tagline":145,"is_featured":99,"date_created":146,"date_updated":9},857,"https:\u002F\u002Folivia-tsui.github.io\u002Fct\u002F","World's Best Scale Tool","worlds-best-scale-tool",[142],{"seo":9,"name":9,"slug":143},"colors","eb5afb81-91ac-496d-96b6-bd870afbc2a8.webp","Advanced color scale and palette generation tool","2026-06-24T04:31:04.697212+00:00",[],[149,162,179],{"url":150,"icon":9,"name":151,"slug":152,"tags":153,"cover":159,"tagline":160,"is_featured":3,"date_created":161,"date_updated":9},"https:\u002F\u002Flinear.app","Linear","linear-app",[154,156,157,158],{"seo":9,"name":9,"slug":155},"collaboration",{"seo":9,"name":9,"slug":80},{"seo":9,"name":73,"slug":40},{"seo":9,"name":9,"slug":85},"7dc9bed7-8510-495f-82b3-84a60b1b4819.webp","Fast, streamlined issue tracking and project management — built for modern product teams","2026-06-16T07:18:11.23048+00:00",{"url":163,"icon":9,"name":164,"slug":165,"tags":166,"cover":176,"tagline":177,"is_featured":3,"date_created":178,"date_updated":9},"https:\u002F\u002Fwww.gimp.org","GIMP","gimp",[167,168,171,172,174],{"seo":9,"name":70,"slug":71},{"seo":9,"name":169,"slug":170},"Open Source","open-source",{"seo":9,"name":9,"slug":125},{"seo":9,"name":9,"slug":173},"svg",{"seo":9,"name":9,"slug":175},"print-design","9f4321c5-7770-4e9d-a434-774fc0698c90.webp","The free and open-source image editor — a powerful Photoshop alternative for photo retouching and image composition","2026-06-16T07:16:45.154035+00:00",{"url":180,"icon":9,"name":181,"slug":182,"tags":183,"cover":189,"tagline":190,"is_featured":3,"date_created":191,"date_updated":9},"https:\u002F\u002Fbalsamiq.com","Balsamiq","balsamiq",[184,186,187,188],{"seo":9,"name":9,"slug":185},"wireframe",{"seo":9,"name":9,"slug":80},{"seo":9,"name":9,"slug":155},{"seo":9,"name":73,"slug":40},"3d08be4f-39f6-4152-a769-e28d1a04aac2.webp","Fast, focused wireframing tool that keeps conversations on structure — not pixels","2026-06-16T07:14:07.685566+00:00"]