Question 1

What are shadcn examples?

Accepted Answer

Shadcn examples are 1,100+ free, copy-paste React components showing real-world compositions of shadcn/ui primitives — a carousel with thumbnails, a dropdown menu with submenus, a multi-step form with react-hook-form + Zod, a data table with sort + filter + pagination. Each example is a single self-contained TSX file you can drop into any Next.js or React app. They're the "show me the code" companion to shadcn/ui's primitive docs.

Question 2

Are all shadcn examples free?

Accepted Answer

Yes. Every example across all 53 component categories is free for personal and commercial use — no attribution requirement, no runtime dependency on shadcn.io, no gating. The Pro subscription unlocks premium BLOCKS (hero sections, pricing tables, CTAs, dashboards), a separate product layered on top. Individual component examples stay free forever.

Question 3

How is this different from the shadcn/ui docs?

Accepted Answer

The shadcn/ui docs (shadcn.com) ship the primitives — Accordion, Button, Dialog, the atomic building blocks. shadcn.io examples are the REAL-WORLD compositions those primitives were meant for: a nested multi-level accordion with plus-minus toggles, a dialog with a react-hook-form + Zod form inside, a data table built on TanStack Table with bulk actions. Think of shadcn.com as the library and shadcn.io as the cookbook.

Question 4

How do I choose the right example for my use case?

Accepted Answer

Start at the category landing (/accordion-examples, /button-examples, etc.) and browse by variant — each category groups examples by pattern (standard, with-icons, multi-level, form-integrated). Match the variant name to your use case. If nothing matches exactly, pick the closest and customize — every example is plain TSX so tweaking a className or adding a prop is trivial.

Question 5

How do I install a shadcn example in my project?

Accepted Answer

Each example detail page shows a one-line `npx shadcn@latest add` command that copies the TSX source into `components/examples/{category}/` alongside any missing primitives (the Accordion / Dialog / Form wrapper, Radix dependency, etc.). Run the command once, swap the placeholder data for your own, ship it. Works with any Next.js or Vite + React project that has shadcn/ui already initialized.

Question 6

Can I use the CLI without a shadcn.io account?

Accepted Answer

Yes for component examples — they're public and the installer runs without auth. Pro blocks (hero sections, pricing tables, etc.) require a token from your shadcn.io account because that's the gated content. Examples are not gated. If the installer ever asks for a token on an example URL, that's a bug — let us know.

Question 7

How do I customize an example's colors / shapes / spacing?

Accepted Answer

Examples use plain Tailwind classes on shadcn/ui primitives. Edit the className inline to tweak colors (`bg-primary` → `bg-emerald-500`), spacing (`p-4` → `p-6`), or sizing. For theme-wide changes, override the CSS variables in your globals.css (`--primary`, `--accent`, etc.) and every component adapts. For variant-level changes (a new Button size, a new Alert color), edit the cva config in the matching `components/ui/*.tsx` file.

Question 8

What's the license for shadcn examples?

Accepted Answer

MIT-licensed, same as shadcn/ui itself. Use them in personal, commercial, open-source, or closed-source projects without attribution. Ship them as-is or remix them beyond recognition. Every underlying dependency (Radix UI, Tailwind CSS, Lucide React, react-hook-form, Zod, vaul, cmdk, TanStack Table, Recharts) is MIT-licensed too — no license-compatibility surprises.

Question 9

Which React and Next.js versions do the examples support?

Accepted Answer

React 19+ and Next.js 16+ are the baseline. Every example is written for the App Router and marked `"use client"` where interactive state is required. Pages Router projects work too — you may need to adjust the `~/` import alias depending on your tsconfig. React 18 apps work for most examples but features like useTransition / Server Actions only apply to 19+.

Question 10

Do examples work with Tailwind CSS v3 AND v4?

Accepted Answer

Both. shadcn.io is authored on Tailwind v4 so examples use v4 class names and design tokens. If you're on v3, the class names apply identically — Tailwind v4 introduced opt-in features but kept the utility naming compatible. The CSS variable naming (`--primary`, `--accent`, `--card`, etc.) is declared identically across versions, just in different config locations (tailwind.config.ts for v3, globals.css for v4).

Question 11

Can I use shadcn examples with React Server Components?

Accepted Answer

Most examples work cleanly as or inside Server Components. Static components (Card, Table, Badge, Skeleton, Separator) render server-side with no client boundary. Interactive components (Dialog, DropdownMenu, Carousel, Command, Form, Drawer) need `"use client"` because they manage state, but the data they display can be fetched in a parent Server Component and passed down. Each example's FAQ calls out any RSC caveats specific to that component.

Question 12

Do examples use controlled or uncontrolled state?

Accepted Answer

Both patterns appear across the gallery. Static UI (Avatar, Badge, Skeleton) has no state. Interactive components show up in both: AlertDialog uses controlled open/close state so you can block dismiss during async work; Input / Textarea default to uncontrolled + native form submission for simplicity. Form examples lean on react-hook-form (uncontrolled inputs under the hood) for performance on large forms. Check the specific example's code — the pattern is always explicit.

Question 13

How often do new examples get added?

Accepted Answer

Rolling. The catalog tracks real-world compositions we ourselves reach for when building dashboards and SaaS apps. When a new shadcn/ui primitive ships (Input Group, Item, Field) or a new pattern gains traction (drawer-in-dialog on mobile, Server-Action-driven forms), examples land within a week. Follow the changelog or the Twitter account for announcements.

Question 14

Can I contribute an example or suggest a pattern?

Accepted Answer

Yes — the shadcn.io source is on GitHub. Open a PR with a new example file under `packages/examples/{category}/{variant}/`, include the @title / @description / @related JSDoc frontmatter (the generator produces the MDX doc page from it), and add a screenshot via `bun run scripts/screenshot-example-{category}.ts --slug your-slug`. Pattern suggestions can land as issues first — we'll triage and assign.

Question 15

How is SEO handled across the 1,100+ examples?

Accepted Answer

Every example has a dedicated MDX page with unique frontmatter (title, description), a bespoke FAQ (@questions JSDoc array) emitting FAQPage JSON-LD, @related internal links to sibling patterns, and an OG image pointing at the real screenshot WebP. Category galleries (/accordion-examples etc.) emit CollectionPage + ItemList JSON-LD. The whole tree is in sitemap-examples.xml with per-page lastmod and image entries.

Question 16

Where can I get help if an example breaks in my project?

Accepted Answer

Three channels. (1) The example's detail page has a Questions section covering common integration issues. (2) GitHub Issues on the shadcn.io repo for bugs in the example itself. (3) The shadcn/ui Discord for primitive-level questions (Radix behavior, Tailwind variant tokens). For paid Pro support (priority responses, custom integration help), the Pro subscription includes a dedicated support email.

React component examples for shadcn/ui.

Browse every component category

Every component example. One prompt away.

Grab your MCP URL

Paste into your editor

Prompt as usual

Frequently Asked Questions