shadcn.io is an independent project built on shadcn/ui
The 
shadcn library your AI agent builds with.
6,181 blocks, 14 templates and 174 components for React, Vue, Svelte and Solid. Ask your agent, and it installs them in your theme.
The world's largest shadcn block library
6,181 blocks, from the hero to the settings page, designed as one system: responsive, accessible, light and dark, and in your theme, for React, Vue, Svelte and Solid.
Used by 100k devs and across top universities.
- Harvard UniversityCambridge, MA
- University of California, BerkeleyBerkeley, CA
- Carnegie Mellon UniversityPittsburgh, PA
- Cornell UniversityIthaca, NY
- University of California, Los AngelesLos Angeles, CA
- University of WashingtonSeattle, WA
- University of Illinois Urbana-ChampaignChampaign, IL
- Dartmouth CollegeHanover, NH
Campus photos from Wikimedia Commons: credits
- Harvard: Wgreaves (CC BY-SA 4.0), Daderot (CC BY-SA 3.0), chensiyuan (CC BY-SA 4.0)
- Berkeley: Falcorian (CC BY-SA 4.0), Bob Collowan (CC BY-SA 3.0), Carol M. Highsmith, Library of Congress (Public domain)
- CMU: Dllu (CC BY-SA 4.0), Jared Luxenberg (CC BY-SA 3.0), Dllu (CC BY-SA 4.0)
- Cornell: Russian Elmo (CC BY-SA 4.0), Eustress (CC BY-SA 4.0), sach1tb (CC BY-SA 2.0)
- UCLA: Coolcaesar (CC BY-SA 3.0), Logan Ward (CC BY 2.0), Alton (CC BY-SA 3.0)
- UW: Ken Lund (CC BY-SA 2.0), Keng Susumpow (CC BY 2.0), Punctured Bicycle (Public domain)
- UIUC: Dori (CC BY-SA 3.0 us), HalloweenHJB (CC BY 3.0), Kevin Dooley (CC BY 2.0)
- Dartmouth: Kane5187 (Public domain), Kane5187 (Public domain), Daderot (Public domain)
Premium shadcn templates, ready to launch
Hand-built sites for startups, SaaS, agencies and portfolios, every page designed and built with Next.js, Tailwind CSS and shadcn/ui. Yours to edit and ship, included with Pro.
Built with shadcn.io
100k+ devs are building with shadcn.io components.
- Fetchtalent AIfetchtalent.ai
- InfoSignal Inc.infosignal.com
- TextbookLMtextbooklm.co
- Toonly AItoonly.ai
- Lexosgolexos.com
- Skilluraskillura.com
- InfoBoardifs-infoboard.com
- Meeting IQmeetingiq.com
Build yours next. Pro has every block and template, ready to ship.
Get ProThe shadcn MCP server for every AI agent
Claude Code, Cursor, VS Code and 35 more. Connect once, then ask your agent for any component: it arrives in your framework, typed, accessible and in your theme. Included with Pro.
shadcn/ui for React, Vue, Svelte and Solid
The same components, one design and one theme on every framework. React runs on Base UI, Radix, React Aria or Ark UI; the others on Ark UI.
DESIGN.md files for 500 brands
Stripe, Linear, Apple and 497 more: each brand's colors, typography and components in one file your AI agent builds from. Free to download.
174 free shadcn/ui components
From Button to Date Picker to a guided Tour, accessible, typed in TypeScript and styled with Tailwind CSS v4, each with live demos and the code. Free with an account.
1,103 shadcn/ui examples, ready to copy
Charts, forms, menus and more, in 53 galleries: real-world patterns built from the components, each live with its code. Free with an account.
35 typed React hooks for every interface
Debounce, local storage, media queries and more: each hook one TypeScript file you copy in and own. Free with an account.
Every premium block and template, one Pro plan
Every block, all 14 premium templates, the MCP server and the Pro animated components, for you or your whole team. Monthly, yearly or lifetime.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
- How many people can use the license.
- Client work, SaaS products and anything you charge for.
- Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.
- Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.
- Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.
- Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.
- Typewriters, scrambles, counters and more, for headlines, labels and numbers.
- Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.
- WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.
- One design and one theme on all four: the components, blocks and effects are built for each framework.
- React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.
- From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.
- Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.
- Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.
- Debounce, local storage, media queries and more: each hook is one typed file you own.
- From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.
- Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.
- Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.
- Priority requests are answered first.
Individual
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
- Seats: 1 seat
- Commercial use: Personal & open source only
- Blocks: All 6,181 blocks
- Templates: All 14 templates
- MCP server: 38 AI clients
- Animated buttons: All 35 buttons
- Text effects: All 97 effects
- Backgrounds: All 100 backgrounds
- Shaders: All 100 shaders
- Frameworks: React, Vue, Svelte, Solid
- UI libraries: Base UI, Radix, Aria, Ark
- Components: All 174 components
- Examples: All 1,103 examples
- Charts: All 70 charts
- React hooks: All 35 hooks
- Icons: 294k+ icons
- DESIGN.md files: All 500 brands
- Theme builder: 8 styles × 18 colors
- Support: Standard
Team
Most popularFor freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
- Seats: Up to 5 seats
- Commercial use: Included
- Blocks: All 6,181 blocks
- Templates: All 14 templates
- MCP server: 38 AI clients
- Animated buttons: All 35 buttons
- Text effects: All 97 effects
- Backgrounds: All 100 backgrounds
- Shaders: All 100 shaders
- Frameworks: React, Vue, Svelte, Solid
- UI libraries: Base UI, Radix, Aria, Ark
- Components: All 174 components
- Examples: All 1,103 examples
- Charts: All 70 charts
- React hooks: All 35 hooks
- Icons: 294k+ icons
- DESIGN.md files: All 500 brands
- Theme builder: 8 styles × 18 colors
- Support: Priority
Organization
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
- Seats: Unlimited seats
- Commercial use: Included
- Blocks: All 6,181 blocks
- Templates: All 14 templates
- MCP server: 38 AI clients
- Animated buttons: All 35 buttons
- Text effects: All 97 effects
- Backgrounds: All 100 backgrounds
- Shaders: All 100 shaders
- Frameworks: React, Vue, Svelte, Solid
- UI libraries: Base UI, Radix, Aria, Ark
- Components: All 174 components
- Examples: All 1,103 examples
- Charts: All 70 charts
- React hooks: All 35 hooks
- Icons: 294k+ icons
- DESIGN.md files: All 500 brands
- Theme builder: 8 styles × 18 colors
- Support: Priority
Billed once a year in USD. Cancel anytime.
Individual
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
- How many people can use the license.Seats: 1 seat
- Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
- Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
- Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
- Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
- Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
- Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
- Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
- WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
- One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
- React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
- From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
- Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
- Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
- Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
- From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
- Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
- Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
- Priority requests are answered first.Support: Standard
Team
Most popularFor freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
- How many people can use the license.Seats: Up to 5 seats
- Client work, SaaS products and anything you charge for.Commercial use: Included
- Priority requests are answered first.Support: Priority
Organization
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
- How many people can use the license.Seats: Unlimited seats
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
Devs love shadcn.io
Rated 4.9 out of 5 from 150+ reviews. 100k+ developers build with shadcn.io; here's what they say.
Danny G.Founder of DevStack“shadcn.io templates have completely transformed how we approach new client projects. The code quality is exceptional and the designs are truly world-class.”
Ibrahim S.Frontend Lead @ ScaleUp“shadcn.io templates strike the perfect balance between aesthetics and functionality. A real game-changer for our projects.”
Alan Obeng-PeprahSenior Designer @ NativeXAI“Beautiful landing page design with perfect balance and flow. The color palette combined with the animations creates an exceptional user experience.”
Garrett P.Frontend Lead at TechFusion“I appreciate how modular and well-documented these components are. We've been able to mix and match pieces from different templates seamlessly.”
Ian D.CTO at Wavelength“I've used many template libraries before, but shadcn.io stands out for its attention to performance optimization and clean code architecture.”
Abiola BraimahDeveloper @ Studio IX“The templates are not just visually stunning but also incredibly well-structured. Saved us weeks of development time.”
Hallic M.Developer @ AtlasLabs“These templates have become our go-to resource. The code is clean, well-documented, and easily customizable.”
Acromond X.Co-founder @ VectorlabsVentures“Outstanding quality and attention to detail. The responsive design works flawlessly across all devices.”
Frequently asked questions
What shadcn.io is and which stacks it runs on, how accessible it is, and what Pro adds.
4.9 out of 5 from 150+ developers
Ship a polished product, faster
The components are free for React, Vue, Svelte and Solid. Pro adds every block, the premium templates and the MCP server: monthly, yearly or lifetime.
- Cancel anytime
- Keep what you've shipped