21st-dev-builder-v2
Rapidly build websites with the 21st.dev component library
Install & Use
Copy this prompt and send it to your AI assistant (Claude / Cursor / TRAE / Codex / WorkBuddy etc.) to auto-install:
Help me install this AI Skill: 21st-dev-builder-v2. It is used for: Rapidly build websites with the 21st.dev component library Full Skill content: https://321skill.com/skills/21st-dev-builder-v2/raw/index.md Read that page and install it.
The prompt includes a link to the full Skill content. You can also view the full content.
This Skill addresses the challenge developers face when they want to use high-quality React UI components but are unsure how to select, install, and integrate them. In real-world development, frontend teams often need to build landing pages, dashboards, e-commerce pages, and more from scratch. However, manually searching for and combining shadcn/ui components is inefficient and can cause them to miss the latest high-quality components from the community.
The usage is straightforward: simply describe the type of page you want to build in natural language (e.g., "a SaaS landing page with a hero section, features, pricing, and testimonials"). Claude will automatically search through the 1400+ components on 21st.dev, analyze the most suitable ones, and then use the npx shadcn command to install and assemble them into complete page code. You can further refine the style, layout, and functionality through iterative instructions.
It's ideal for frontend and full-stack developers who need to quickly build high-quality websites. This is especially true for teams already using shadcn/ui and Tailwind CSS, and for projects that frequently require building marketing pages, admin dashboards, product showcases, and similar scenarios.
It's recommended to use this tool in a project already initialized with shadcn/ui and to ensure network access to 21st.dev. Note that it requires React 18+ and the Next.js App Router, and is not suitable for pure backend or non-React projects.
Key Features
Unlike directly using the official shadcn/ui components, this Skill can automatically discover 1400+ components contributed by various authors in the 21st.dev community and intelligently match them to user requirements, eliminating the need for manual browsing and comparison.
Limitations
Requires React 18+, Next.js App Router, Tailwind CSS 4+, and depends on the `npx shadcn` command and network access to the 21st.dev component registry.
FAQ
How do I install a 21st.dev component?
Use the command: `npx shadcn@latest add "https://21st.dev/r/{author}/{component}"`
What are the prerequisites?
Requires Node.js, React 18+, Next.js (App Router), Tailwind CSS 4+, and a project already initialized with shadcn/ui.
Installation guide for AI assistants
If your AI coding assistant (Claude Code, Cursor, TRAE etc.) can see this page, send it this message to auto-install:
Visit https://321skill.com/skills/21st-dev-builder-v2/raw/index.md to read the original Skill definition (Markdown format) for 21st-dev-builder-v2, and install it according to the instructions.
Raw Markdown URL for AI: /skills/21st-dev-builder-v2/raw/index.md