Assembling...
21st.dev is a community-driven React component registry that provides production-ready, beautifully designed UI components built with Tailwind CSS. With over 1.4 million developers, it serves as the go-to source for high-quality components that are AI-ready and designed to work seamlessly with agent workflows. The SDK enables programmatic component discovery and integration, and agent templates allow AI tools to generate complete UIs from component primitives.
Browse and install production-ready components directly into your project with a single CLI command, skipping the build-from-scratch phase for common UI patterns.
Use 21st.dev agent templates to let AI tools like Claude or GPT compose complete page layouts from component primitives with proper styling and responsive behavior.
Start a new design system by selecting and customizing components from the registry, then extend them with your brand tokens and custom variants.
Search the registry by functionality, style, or use case to find battle-tested components that match your design requirements without reinventing the wheel.
// Install a component: npx @21st-dev/cli add hero-section// Using an installed 21st.dev component in your appimport { HeroSection } from "@/components/ui/hero-section";import { Button } from "@/components/ui/button";import { Badge } from "@/components/ui/badge";export default function LandingPage() {return (<HeroSectionbadge={<Badge variant="secondary">New Release</Badge>}title="Build faster with AI-ready components"description="Production-quality React components designed for modern web apps."actions={<><Button size="lg">Get Started</Button><Button size="lg" variant="outline">View Components</Button></>}/>);}
Seamless integration, great documentation. Set up in under 10 minutes.
2 days ago
Works well for our use case. Would love to see more webhook event types.
1 week ago
Excellent compliance coverage. HIPAA audit trail works perfectly.
2 weeks ago
| Key | Description | Example |
|---|---|---|
| TWENTYFIRST_API_KEY | API key for 21st.dev SDK and agent integrations | 21st_xxxxxxxxxxxxxxxxxxxxxxxx |
21st.dev is a curated React component registry used by 1.4M+ developers that provides AI-ready, production-quality UI components styled with Tailwind CSS. Components are installed as source code you own and customize. The agent SDK and structured metadata make it uniquely suited for AI-powered UI generation workflows, enabling tools like Claude to compose complete interfaces from component primitives.