Shadcn.io is not affiliated with official shadcn/ui
The AI-Native shadcn/ui Component Library for React
Build faster with thousands of production-ready shadcn/ui blocks and components. Designed for AI-assisted React and Tailwind development.
- blocks
- 6,000+
- React icons
- 285k
- themes
- 59
Pro Marketing Blocks
Production-ready hero, pricing, CTA, and feature sections for your landing pages
Pricing Section
100 BlocksPricing tables, plan comparisons, and subscription sections
Hero Section
150 BlocksLanding page heroes, headline banners, and above-the-fold sections
Call to Action
100 BlocksConversion CTAs, announcement bars, and signup sections
Features Section
170 BlocksBento grids, split panels, alternating rows, and capability showcases
Testimonials
100 BlocksCustomer quotes, social proof, and review sections
FAQ Section
100 BlocksAccordions, search-filtered lists, and tabbed Q&A layouts
Logo Wall
100 BlocksCustomer logo strips, marquees, grid walls, and featured case studies
Banner
100 BlocksTop bars, alert strips, floating pills, cookie consent, and countdowns
Stop piecing primitives together. Ship full sections.
Primitives are the Lego bricks. Pro blocks are the fully-assembled pricing rows, hero splits, settings panels, and dashboards — built on the same shadcn/ui + Tailwind foundation.
Pick any block
Browse 6,000+ production-ready sections across 46 categories — from pricing rows to dashboards.
Own the code
Paste it straight into your repo. Everything is plain shadcn/ui + Tailwind — edit, theme, or compose freely.
Ship today
Install via the shadcn CLI or prompt an AI agent through MCP. What took a day takes minutes.
Works with the editors you already use
Eight most-used AI agents below — every setup guide is a single Pro URL away.
Claude Code
Setup →Official Anthropic CLI — one-line `claude mcp add` setup
Cursor
Setup →One-click install via Cursor 1.0+ or ~/.cursor/mcp.json
Zed
Setup →Fast, modern editor — connect via ~/.config/zed/settings.json
Claude Desktop
Setup →Custom Connectors UI — paste one URL, no restart
VS Code
Setup →Copilot agent mode with .vscode/mcp.json per workspace
Windsurf
Setup →Cascade MCP marketplace — token via ${env:VAR} interpolation
JetBrains
Setup →AI Assistant across IntelliJ, WebStorm, PyCharm & more
OpenAI Codex
Setup →TOML config at ~/.codex/config.toml — CLI & IDE share state
One MCP. Every AI agent. Ship faster.
Connect Claude Code, Cursor, Windsurf, Lovable, v0 — or any MCP-ready AI tool — to 6,000+ shadcn/ui blocks and 285k React icons. 60-second setup. Cancel anytime.
Grab your MCP URL
Copy from /dashboard/account — your personal Pro token is baked in.
Paste into your editor
Any MCP-ready client. Here's the command for Claude Code:
Prompt as usual
Your AI agent auto-discovers all 15 MCP tools — search, preview and install any shadcn.io resource straight from your prompt.
Shadcn Component Examples
The 8 most-used shadcn primitives — browse 1,100+ free copy-paste examples across every component
Button
35+ examplesLoading states, icon buttons, variants, and keyboard-shortcut buttons
Form
42+ examplesValidated layouts on react-hook-form + Zod — sign-up, settings, multi-step
Dialog
17+ examplesCentered modals for forms, settings panels, and detail views
Data Table
8+ examplesSortable, paginated tables with row selection and bulk actions
Dropdown Menu
30+ examplesKebab menus, user profile menus, and settings dropdowns with submenus
Card
4+ examplesLogin forms, image cards, dashboard widgets, and clickable tiles
Tabs
11+ examplesHorizontal and vertical tabbed panels with badges and scrollable rows
Input
24+ examplesText, email, password show/hide, search, and validation-state variants
Free Resources
Discover free components, patterns, and tools for your next project
Patterns
1,100+ patternsFree component patterns built with shadcn/ui
Icons
200,000+ iconsSearch across 200,000+ icons from 150+ libraries
Templates
220+ templatesOpen source React templates built with shadcn/ui
Charts
50+ chartsBeautiful chart components for data visualization
Text Effects
30+ effectsAnimated text effects and typography components
Backgrounds
30+ backgroundsAnimated backgrounds and visual effects
AI Components
25+ componentsAI-powered UI components and chat interfaces
Hooks
34 hooksTypeScript React hooks for Next.js projects
Themes
60+ themesReady-to-use theme configurations for shadcn/ui
Easings
30+ easingsAnimation easing functions and curve visualizer
Awesome
170+ resourcesCurated shadcn/ui resources, libraries, and tools
Tools
20+ toolsFree online tools for developers
Frequently Asked Questions
Everything you need to know about shadcn.io, our community component registry for shadcn/ui.