Question 1

What is shadcn.io?

Accepted Answer

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.

Question 2

Is shadcn.io the official shadcn/ui website?

Accepted Answer

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.

Question 3

Who is shadcn.io for?

Accepted Answer

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.

Question 4

How do I install components from shadcn.io?

Accepted Answer

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.

Question 5

What is included for free on shadcn.io?

Accepted Answer

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.

Question 6

What are blocks and patterns?

Accepted Answer

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.

Question 7

What frameworks does shadcn.io support?

Accepted Answer

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.

Question 8

What developer tools are available?

Accepted Answer

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.

Question 9

How many icons are available on shadcn.io?

Accepted Answer

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.

Question 10

Can I customize the icons?

Accepted Answer

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.

Question 11

How do I use icons in my React project?

Accepted Answer

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.

Question 12

Are the icons free for commercial use?

Accepted Answer

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.

Question 13

How much does shadcn.io Pro cost?

Accepted Answer

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.

Question 14

What do I get with a Pro subscription?

Accepted Answer

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.

Question 15

Can I use Pro components for commercial projects?

Accepted Answer

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.

Question 16

Is there a free trial or refund policy?

Accepted Answer

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.

The AI-Native shadcn/ui Component Library for React

Hero

Testimonials

Account

Tables

Command Menu

Dialog

Onboarding

About

Awards

Contact

Blog

Buttons

Free Resources

Patterns

Icons

Templates

Charts

Text Effects

Backgrounds

AI Components

Hooks

Themes

Easings

Awesome

Tools

Frequently Asked Questions