shadcn.io is a community-driven component registry for shadcn/ui. We offer 880+ premium production-ready blocks, 1,100+ free patterns, 285,000+ React icons, 35+ hooks, and 30+ developer tools. All components are designed to work seamlessly with shadcn/ui, React, Next.js, and Tailwind CSS.

Is shadcn.io the official shadcn/ui website?

No, shadcn.io is not affiliated with the official shadcn/ui project. The official shadcn/ui library is at ui.shadcn.com. We are a community registry that builds on top of shadcn/ui, offering additional blocks, patterns, icons, and tools that are compatible with the shadcn/ui ecosystem.

Who is shadcn.io for?

shadcn.io is designed for React developers, Next.js developers, and teams building production applications with Tailwind CSS. Whether you are a solo developer, startup, or enterprise team, our components help you ship faster with battle-tested UI blocks.

How do I install components from shadcn.io?

You can install components using the shadcn CLI. Run npx shadcn@latest add followed by the registry URL. We support npm, yarn, pnpm, and bun. Each component page shows the exact installation command you need.

What is included for free on shadcn.io?

Free users get access to 1,100+ component patterns, 285,000+ React icons from 220+ libraries, 35+ React hooks, 30+ developer tools (image compression, PDF tools, code formatters, and more), and 170+ curated community resources. No account required for free content.

What are blocks and patterns?

Blocks are production-ready UI sections like hero sections, pricing tables, dashboards, forms, and more. They are complete, styled components you can copy and customize. Patterns are smaller component variations showing different ways to use shadcn/ui components. Blocks are premium, patterns are free.

What frameworks does shadcn.io support?

Our components are built for React and Next.js with TypeScript. For icons, we generate code for React, Vue, Svelte, Angular, Solid.js, and Preact. All components use Tailwind CSS for styling and are compatible with the shadcn/ui design system.

What developer tools are available?

We offer 30+ free tools including: image compression and format conversion, AI background removal, PDF merge and split, video and audio editing, code formatters for JavaScript, Python, HTML, CSS, and JSON, Base64 and URL encoding, hash generators, text case converters, and more.

How many icons are available on shadcn.io?

We offer 285,000+ free SVG icons from 220+ icon libraries including Lucide, Heroicons, Material Symbols, Font Awesome, Tabler, Feather, Simple Icons, and many more. All icons are optimized for React and can be installed via the shadcn CLI.

Can I customize the icons?

Yes, each icon can be customized with color, size, stroke width, rotation, shadow, opacity, padding, and background color. You can preview changes in real-time and copy the customized SVG or React component code directly.

How do I use icons in my React project?

You can copy the React component code directly from any icon page, or install icons via the shadcn CLI using npx shadcn@latest add. We also provide Vue, Svelte, Angular, Solid, and Preact code, plus raw SVG and data URL formats.

Are the icons free for commercial use?

Most icon libraries on shadcn.io are open source with permissive licenses like MIT, Apache 2.0, or ISC. Each icon page displays the license information. Always check the specific license for your use case, especially for brand icons.

How much does shadcn.io Pro cost?

Individual plans start at $39/month or $229/year. Team plans (up to 5 seats) are $79/month or $469/year. Organization plans (unlimited seats) are $159/month or $949/year. We also offer lifetime licenses starting at $599 for individuals.

What do I get with a Pro subscription?

Pro subscribers get access to 880+ premium blocks, all charts and data visualization components, shaders and animated backgrounds, text animations, AI components, an ad-free experience, and priority support. You also keep access to any content you have used if you cancel.

Can I use Pro components for commercial projects?

Yes, but you need a Team or Organization license for commercial use. Individual licenses are for personal and non-commercial projects only. Team and Organization licenses allow full commercial usage in client projects and products.

Is there a free trial or refund policy?

We do not offer refunds on digital products once delivered. However, you can explore our extensive free content (1,100+ patterns, 285,000+ icons, tools, and hooks) before subscribing. If you cancel, you retain access to content you have already used.

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 Blocks

Pricing tables, plan comparisons, and subscription sections

Hero Section

150 Blocks

Landing page heroes, headline banners, and above-the-fold sections

Call to Action

100 Blocks

Conversion CTAs, announcement bars, and signup sections

Features Section

170 Blocks

Bento grids, split panels, alternating rows, and capability showcases

Testimonials

100 Blocks

Customer quotes, social proof, and review sections

FAQ Section

100 Blocks

Accordions, search-filtered lists, and tabbed Q&A layouts

Logo Wall

100 Blocks

Customer logo strips, marquees, grid walls, and featured case studies

Banner

100 Blocks

Top bars, alert strips, floating pills, cookie consent, and countdowns

See all 6,000+ blocks →

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

See all supported clients →

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+ examples

Loading states, icon buttons, variants, and keyboard-shortcut buttons

Form

42+ examples

Validated layouts on react-hook-form + Zod — sign-up, settings, multi-step

Dialog

17+ examples

Centered modals for forms, settings panels, and detail views

Data Table

8+ examples

Sortable, paginated tables with row selection and bulk actions

Dropdown Menu

30+ examples

Kebab menus, user profile menus, and settings dropdowns with submenus

Card

4+ examples

Tabs

11+ examples

Horizontal and vertical tabbed panels with badges and scrollable rows

Input

24+ examples

Text, email, password show/hide, search, and validation-state variants

See all 1,100+ examples →

Free Resources

Discover free components, patterns, and tools for your next project

Patterns

1,100+ patterns

Free component patterns built with shadcn/ui

Icons

200,000+ icons

Search across 200,000+ icons from 150+ libraries

Templates

220+ templates

Open source React templates built with shadcn/ui

Charts

50+ charts

Beautiful chart components for data visualization

Text Effects

30+ effects

Animated text effects and typography components

Backgrounds

30+ backgrounds

Animated backgrounds and visual effects

AI Components

25+ components

AI-powered UI components and chat interfaces

Hooks

34 hooks

TypeScript React hooks for Next.js projects

Themes

60+ themes

Ready-to-use theme configurations for shadcn/ui

Easings

30+ easings

Animation easing functions and curve visualizer

Awesome

170+ resources

Curated shadcn/ui resources, libraries, and tools

Tools

20+ tools

Free online tools for developers

Built with shadcn.io

50k+ devs are building with shadcn.io components

fetchtalent.ai

Fetchtalent AI

infosignal.com

InfoSignal Inc.

textbooklm.co

TextbookLM

toonly.ai

Toonly AI

golexos.com

Lexos

skillura.com

Skillura

ifs-infoboard.com

InfoBoard

meetingiq.com

Meeting IQ

genysolutions.tech

Gen Y Solutions

nickwemyssrealestate.com

Intero Properties

onlytool.ai

Onlytool

stakenet.app

Stakenet

philippine.careers

PH Careers

usemidas.app

Midas

lancershout.com

Lancershout

arete.codes

Arete Codes

See more projects built with shadcn.io →

Devs love shadcn.io

We've been blown away by the love & support from users

Beautiful landing page design with perfect balance and flow. The color palette combined with the animations creates an exceptional user experience.

Alan Obeng-PeprahSenior Designer @ NativeXAI

I'm thoroughly impressed with the design they delivered. The final product matched exactly what I envisioned.

DesmondCo-founder @ VectorlabsVentures

As an agency owner, I usually spend weeks perfecting landing page layouts for clients. With shadcn.io, I literally plug in a template, tweak the copy, and I'm ready to ship.

Duke Opoku AmankwahFounder @ Midas

The templates are not just visually stunning but also incredibly well-structured. Saved us weeks of development time.

Abiola BraimahDeveloper @ Studio IX

Beautiful landing page design with perfect balance and flow. The color palette combined with the animations creates an exceptional user experience.

Alan Obeng-PeprahSenior Designer @ NativeXAI

I'm thoroughly impressed with the design they delivered. The final product matched exactly what I envisioned.

DesmondCo-founder @ VectorlabsVentures

As an agency owner, I usually spend weeks perfecting landing page layouts for clients. With shadcn.io, I literally plug in a template, tweak the copy, and I'm ready to ship.

Duke Opoku AmankwahFounder @ Midas

The templates are not just visually stunning but also incredibly well-structured. Saved us weeks of development time.

Abiola BraimahDeveloper @ Studio IX

Beautiful landing page design with perfect balance and flow. The color palette combined with the animations creates an exceptional user experience.

Alan Obeng-PeprahSenior Designer @ NativeXAI

I'm thoroughly impressed with the design they delivered. The final product matched exactly what I envisioned.

DesmondCo-founder @ VectorlabsVentures

As an agency owner, I usually spend weeks perfecting landing page layouts for clients. With shadcn.io, I literally plug in a template, tweak the copy, and I'm ready to ship.

Duke Opoku AmankwahFounder @ Midas

The templates are not just visually stunning but also incredibly well-structured. Saved us weeks of development time.

Abiola BraimahDeveloper @ Studio IX

Beautiful landing page design with perfect balance and flow. The color palette combined with the animations creates an exceptional user experience.

Alan Obeng-PeprahSenior Designer @ NativeXAI

I'm thoroughly impressed with the design they delivered. The final product matched exactly what I envisioned.

DesmondCo-founder @ VectorlabsVentures

As an agency owner, I usually spend weeks perfecting landing page layouts for clients. With shadcn.io, I literally plug in a template, tweak the copy, and I'm ready to ship.

Duke Opoku AmankwahFounder @ Midas

The templates are not just visually stunning but also incredibly well-structured. Saved us weeks of development time.

Abiola BraimahDeveloper @ Studio IX

Outstanding quality and attention to detail. The responsive design works flawlessly across all devices.

Acromond X.Co-founder @ VectorlabsVentures

Integrating these templates into our workflow has significantly reduced our development cycle. Excellent work!

Raquib S.Backend Developer

These templates have become our go-to resource. The code is clean, well-documented, and easily customizable.

Hallic M.Developer @ AtlasLabs

shadcn.io templates strike the perfect balance between aesthetics and functionality. A real game-changer for our projects.

Ibrahim S.Frontend Lead @ ScaleUp

Outstanding support and premium quality templates. The ROI on these templates is phenomenal.

Kevin K.CEO @ WebCraft

Outstanding quality and attention to detail. The responsive design works flawlessly across all devices.

Acromond X.Co-founder @ VectorlabsVentures

Integrating these templates into our workflow has significantly reduced our development cycle. Excellent work!

Raquib S.Backend Developer

These templates have become our go-to resource. The code is clean, well-documented, and easily customizable.

Hallic M.Developer @ AtlasLabs

shadcn.io templates strike the perfect balance between aesthetics and functionality. A real game-changer for our projects.

Ibrahim S.Frontend Lead @ ScaleUp

Outstanding support and premium quality templates. The ROI on these templates is phenomenal.

Kevin K.CEO @ WebCraft

Outstanding quality and attention to detail. The responsive design works flawlessly across all devices.

Acromond X.Co-founder @ VectorlabsVentures

Integrating these templates into our workflow has significantly reduced our development cycle. Excellent work!

Raquib S.Backend Developer

These templates have become our go-to resource. The code is clean, well-documented, and easily customizable.

Hallic M.Developer @ AtlasLabs

shadcn.io templates strike the perfect balance between aesthetics and functionality. A real game-changer for our projects.

Ibrahim S.Frontend Lead @ ScaleUp

Outstanding support and premium quality templates. The ROI on these templates is phenomenal.

Kevin K.CEO @ WebCraft

Outstanding quality and attention to detail. The responsive design works flawlessly across all devices.

Acromond X.Co-founder @ VectorlabsVentures

Integrating these templates into our workflow has significantly reduced our development cycle. Excellent work!

Raquib S.Backend Developer

These templates have become our go-to resource. The code is clean, well-documented, and easily customizable.

Hallic M.Developer @ AtlasLabs

shadcn.io templates strike the perfect balance between aesthetics and functionality. A real game-changer for our projects.

Ibrahim S.Frontend Lead @ ScaleUp

Outstanding support and premium quality templates. The ROI on these templates is phenomenal.

Kevin K.CEO @ WebCraft

shadcn.io templates have completely transformed how we approach new client projects. The code quality is exceptional and the designs are truly world-class.

Danny G.Founder of DevStack

I've used many template libraries before, but shadcn.io stands out for its attention to performance optimization and clean code architecture.

Ian D.CTO at Wavelength

The animations and micro-interactions in these templates are absolutely stunning. Best investment for our design team.

Ben S.Lead Designer at PixelPerfect

As a non-technical founder, shadcn.io templates helped us launch our MVP in record time without compromising on design quality. Our investors were blown away!

Matthew I.Startup Founder

I appreciate how modular and well-documented these components are. We've been able to mix and match pieces from different templates seamlessly.

Garrett P.Frontend Lead at TechFusion

The ROI on shadcn.io templates is incredible. We've dramatically reduced our development time while delivering higher quality sites to our clients.

Xavier C.Agency Owner

shadcn.io templates have completely transformed how we approach new client projects. The code quality is exceptional and the designs are truly world-class.

Danny G.Founder of DevStack

I've used many template libraries before, but shadcn.io stands out for its attention to performance optimization and clean code architecture.

Ian D.CTO at Wavelength

The animations and micro-interactions in these templates are absolutely stunning. Best investment for our design team.

Ben S.Lead Designer at PixelPerfect

As a non-technical founder, shadcn.io templates helped us launch our MVP in record time without compromising on design quality. Our investors were blown away!

Matthew I.Startup Founder

I appreciate how modular and well-documented these components are. We've been able to mix and match pieces from different templates seamlessly.

Garrett P.Frontend Lead at TechFusion

The ROI on shadcn.io templates is incredible. We've dramatically reduced our development time while delivering higher quality sites to our clients.

Xavier C.Agency Owner

shadcn.io templates have completely transformed how we approach new client projects. The code quality is exceptional and the designs are truly world-class.

Danny G.Founder of DevStack

I've used many template libraries before, but shadcn.io stands out for its attention to performance optimization and clean code architecture.

Ian D.CTO at Wavelength

The animations and micro-interactions in these templates are absolutely stunning. Best investment for our design team.

Ben S.Lead Designer at PixelPerfect

As a non-technical founder, shadcn.io templates helped us launch our MVP in record time without compromising on design quality. Our investors were blown away!

Matthew I.Startup Founder

I appreciate how modular and well-documented these components are. We've been able to mix and match pieces from different templates seamlessly.

Garrett P.Frontend Lead at TechFusion

The ROI on shadcn.io templates is incredible. We've dramatically reduced our development time while delivering higher quality sites to our clients.

Xavier C.Agency Owner

shadcn.io templates have completely transformed how we approach new client projects. The code quality is exceptional and the designs are truly world-class.

Danny G.Founder of DevStack

I've used many template libraries before, but shadcn.io stands out for its attention to performance optimization and clean code architecture.

Ian D.CTO at Wavelength

The animations and micro-interactions in these templates are absolutely stunning. Best investment for our design team.

Ben S.Lead Designer at PixelPerfect

As a non-technical founder, shadcn.io templates helped us launch our MVP in record time without compromising on design quality. Our investors were blown away!

Matthew I.Startup Founder

I appreciate how modular and well-documented these components are. We've been able to mix and match pieces from different templates seamlessly.

Garrett P.Frontend Lead at TechFusion

The ROI on shadcn.io templates is incredible. We've dramatically reduced our development time while delivering higher quality sites to our clients.

Xavier C.Agency Owner

Used by 50k devs
and across top universities

UWUIUCASUHarvardBerkeleyCornellDartmouthCMUUCLAUCSDNortheasternBURITWPIPittUGACincinnatiIE Business SchoolESSECEAFITPompeu Fabra

Frequently Asked Questions

Everything you need to know about shadcn.io, our community component registry for shadcn/ui.

The AI-Native shadcn/ui Component Library for React

Pro Marketing Blocks

Pricing Section

Hero Section

Call to Action

Features Section

Testimonials

FAQ Section

Logo Wall

Banner

Pick any block

Own the code

Ship today

Works with the editors you already use

Claude Code

Cursor

Zed

Claude Desktop

VS Code

Windsurf

JetBrains

OpenAI Codex

Grab your MCP URL

Paste into your editor

Prompt as usual

Shadcn Component Examples

Button

Form

Dialog

Data Table

Dropdown Menu

Card

Tabs

Input

Free Resources

Patterns

Icons

Templates

Charts

Text Effects

Backgrounds

AI Components

Hooks

Themes

Easings

Awesome

Tools

Built with shadcn.io

Fetchtalent AI

InfoSignal Inc.

TextbookLM

Toonly AI

Lexos

Skillura

InfoBoard

Meeting IQ

Gen Y Solutions

Intero Properties

Onlytool

Stakenet

PH Careers

Midas

Lancershout

Arete Codes

Devs love shadcn.io

Used by 50k devsand across top universities

What is shadcn.io?

Is shadcn.io the official shadcn/ui website?

Who is shadcn.io for?

How do I install components from shadcn.io?

Used by 50k devs
and across top universities