What's in the catalog?

100 copy-paste components, from a button to a color picker, a signature pad or a tour. Each has a page with live demos, its anatomy, its API and the code.

Are the components free?

Every component is free to use in personal and commercial projects. Seeing the code and installing it takes a free account, one tap with Google or GitHub.

Which frameworks and UI libraries are there?

React with Base UI, React Aria, Ark UI or Radix UI, and Vue, Svelte and Solid, built on Ark UI. Pick the framework, then the UI library, at the top of a component's page: the demos, the code and the install command follow.

How do I install a component?

Signed in, copy the component's command: `npx shadcn@latest add` with its URL. It adds the file to your components folder, with what it depends on.

Can my AI agent install them?

With Pro, the MCP server: describe what you need and your AI agent picks the component and installs it, on your framework and UI library.

Can I change a component?

Each is one file in your project, styled with Tailwind CSS and your theme's tokens. Change its classes and its parts like any of your own code.

Vue components.

100 components for Vue, built on Ark UI and styled with Tailwind CSS, with live demos and the code. Free with an account.

Get Pro Browse components

Add shadcn.io to your AI agent. · Pro It installs any component from a prompt, with Pro.

Set up MCP

100 components.

Or skip the search. With Pro, your AI agent picks the component you describe and installs it on your stack.

Get Pro

Pricing

Every component, one prompt away, with Pro

Your AI agent installs any of the 100 components, and every example, block and icon, with every Pro plan.

See full pricing

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.
Production-ready React sections: hero, pricing, features, dashboards and more.
Complete multi-page sites you can ship as they are.
React icons from every major library, installable with one command.
Presets that restyle every block, in light and dark.
Lets your AI editor search, preview and install blocks for you.
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
Pro blocks: 6,000+ blocks
Templates: All 14 templates
React icons: 294k+ icons
Themes: All 59 themes
MCP server: Basic usage
Support: Standard

Team

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Seats: Unlimited seats
Commercial use: Included
Pro blocks: 6,000+ blocks
Templates: All 14 templates
React icons: 294k+ icons
Themes: All 59 themes
MCP server: Unlimited usage
Support: Priority