Question 1

What are shadcn.io components?

Accepted Answer

shadcn.io components are a collection of 59 copy-paste React components for Next.js and Tailwind CSS — navbar, dock, kanban, gantt, calendar, code editor, dropzone, combobox, color picker, terminal, video player, and more. They build on top of shadcn/ui's primitives but cover the higher-level patterns the base library doesn't ship: full nav bars, data grids, file upload, code surfaces, device frames, and special effects. Each component is a single TSX file you paste straight into your project.

Question 2

How are shadcn.io components different from shadcn/ui primitives?

Accepted Answer

shadcn/ui ships ~50 base primitives (Button, Card, Dialog, Tabs, Input, …) — small, headless, composable. shadcn.io components are the next layer up: opinionated patterns built FROM those primitives. A Navbar combines Button + Sheet + Link. A Kanban combines DnD + Card + Badge. A Combobox combines Command + Popover + Input. You get a working pattern instead of a bag of parts. Both are copy-paste, both use the same design tokens.

Question 3

Are shadcn.io components free?

Accepted Answer

Most are free to copy and use in personal or commercial projects, including Navbar, Dock, Combobox, Kanban, Calendar, Code Block, Marquee, Avatar Group, Kbd, QR Code, Status, Terminal, and many more. A subset are part of the shadcn.io Pro subscription — Pro also unlocks 6,000+ blocks, 100 backgrounds, 57 shaders, 100 text effects, and 50 animated buttons. Check each component's docs page for the free / Pro badge.

Question 4

Which components should I reach for first?

Accepted Answer

For navigation: Navbar, Dock, Limelight Nav. For forms: Combobox, Color Picker, Dropzone, Choicebox, Tags. For data: Kanban, Gantt, Table, List, Calendar. For layout: Announcement, Banner, Marquee, Avatar Group. For visualization: Code Block, Terminal, QR Code, Kbd, Status. Most Next.js apps reach for at least 5-6 of these on day one.

Question 5

How do I install a shadcn.io component?

Accepted Answer

Open the component's docs page (e.g. shadcn.io/components/navbar) and copy the one-line `npx shadcn@latest add` command. The shadcn CLI writes the component into `components/ui/` (or wherever your components.json points), pulls in any required shadcn/ui primitives, and updates your registry. Import it from `@/components/ui/navbar` and use it. Works with Next.js, Vite, Remix, or any project that has shadcn/ui initialised.

Question 6

Can I install components by prompting an AI agent?

Accepted Answer

Yes — that's the killer feature. shadcn.io ships an MCP (Model Context Protocol) server. Connect it once to Claude Code, Cursor, Windsurf, VS Code, JetBrains, or Zed and prompt the agent: 'install the navbar component into my project'. It runs the exact `shadcn add` command, wires it into a real page, and explains the props. No copy-paste, no docs hunt.

Question 7

Are components TypeScript-typed?

Accepted Answer

Fully. Every component exports its prop types and ships with generics where it makes sense — Combobox is generic over the option shape, Kanban is generic over the card payload, Color Picker exposes its color object type. Hover any component in your editor and you get the full surface. No `any`, no implicit returns.

Question 8

Do components work with Server Components?

Accepted Answer

Most components are client-side — they manage interaction state, animation, drag handlers, or browser APIs, so they import inside `"use client"` boundaries. The presentational ones (Kbd, Pill, Status, AvatarGroup, Banner) work in Server Components too. Each component's docs page calls out the boundary explicitly.

Question 9

Can I customise the components?

Accepted Answer

Yes — that's the entire point of copy-paste. Components ship as plain TSX with Tailwind classes and shadcn/ui tokens. Restyle by editing classes, swap icons, change variants, restructure markup. Nothing is locked behind a black-box import. If you want a starting palette, pair any component with a theme from /themes or build your own at /theme-generator.

Question 10

How do components inherit my theme?

Accepted Answer

Through CSS variables. Every component reads from the standard shadcn/ui design tokens (`--background`, `--foreground`, `--primary`, `--muted`, `--border`, …). Switch theme, components follow. Toggle dark mode, components follow. No theme provider props to wire — the tokens live on `:root` / `.dark` and components inherit by class.

Question 11

Can I mix shadcn.io components with other UI libraries?

Accepted Answer

Yes — components are self-contained TSX, no global state, no styling assumptions beyond Tailwind. Use them alongside Radix, Headless UI, Mantine, MUI, anything. The only soft requirement is that the file imports from `@/components/ui/*` shadcn primitives, which the CLI installs alongside any component you add.

Question 12

How do I keep components up to date?

Accepted Answer

Re-run the install command — `npx shadcn@latest add navbar` overwrites the local file with the latest version. Because components are copy-paste, you control when you upgrade and which edits you keep. Diff-friendly. The MCP server reads the live registry, so AI-driven installs always pull the current source without a stale local cache.

Question 13

What stack do shadcn.io components use?

Accepted Answer

React 19 + Next.js 16 + shadcn/ui + Tailwind CSS + TypeScript. Animation uses Motion (the successor to Framer Motion). Forms use React Hook Form + Zod where applicable. Date pickers use date-fns. Drag-and-drop uses dnd-kit. No extra runtime deps unless a specific component needs them — and the component's docs page lists every dependency with the install command.

Question 14

Do components ship with dark mode?

Accepted Answer

Yes — every component reads from CSS variables that flip on the `.dark` class. Use `next-themes` or your own toggle. Components don't need a darkMode prop; they just inherit. Test with the theme switcher on the docs page or your own dark-mode toggle.

Question 15

Are components accessible?

Accepted Answer

Where the underlying primitive provides accessibility (Combobox uses Command, Animated Modal uses Dialog, Tabs uses Radix Tabs), the wrapping shadcn.io component preserves it — keyboard navigation, focus management, ARIA roles, screen reader announcements all flow through. For purely presentational components (Kbd, Pill, Status), they're semantic by default. Each component's docs page calls out specific a11y considerations.

Question 16

Can I use components in commercial projects?

Accepted Answer

Yes — free components ship under an MIT-style permissive license, no attribution required, no per-seat fee, no runtime dependency on shadcn.io. Pro components require an active shadcn.io Pro subscription. Full license terms at /license.

React Components for shadcn/ui.

Every component, grouped by family

Every component. One prompt away.

Grab your MCP URL

Paste into your editor

Prompt as usual

Frequently Asked Questions