Question 1

What's the difference between a block and an example?

Accepted Answer

Examples are single-component demos (a button variant, a form row, a tooltip pattern). Blocks are full page sections — a complete pricing table, a hero with nav, a dashboard overview. Blocks compose primitives and examples into something you can paste into a real layout and ship. Browse the /examples gallery for component-level patterns.

Question 2

Which blocks are free and which are Pro?

Accepted Answer

All blocks have a free preview with full source-code visibility. A subset are marked Pro (amber crown) — these include the curated marketing sections for hero, pricing, CTA, FAQ, features, logos, banner, and testimonials, plus Pro-only categories. Copy + install for Pro blocks requires an active Pro subscription.

Question 3

How are blocks organized?

Accepted Answer

56 categories, grouped by the page section they're designed for. Marketing categories (hero, pricing, cta, etc.) have curated Pro landings — click the card to see the full comparison grid for that category. Application categories (dashboard, kanban, tables) link straight to a representative block you can preview.

Question 4

What stack do blocks ship on?

Accepted Answer

Every block is React + Next.js + shadcn/ui + Tailwind CSS + TypeScript. No extra runtime dependencies unless the block explicitly demos one (e.g. Recharts for chart blocks). Copy the TSX, run `npx shadcn add` for any primitives, and the block works in your app.

Question 5

Can I use these blocks in commercial projects?

Accepted Answer

Free blocks use an MIT-style permissive license — commercial use is allowed. Pro blocks require an active shadcn.io Pro subscription. Full license terms at /license.

Question 6

How do I install a block?

Accepted Answer

Two paths. 1) Copy the TSX from the block's docs page and paste into your project. 2) Use the MCP server to have your AI editor install it by prompt — `use shadcnio to install hero-announcement into my project` runs the exact `shadcn add` command end-to-end.

Question 7

How do I stay current with new blocks?

Accepted Answer

New blocks and block categories ship continuously. The most reliable way to track them is the MCP server — it reads the live registry, so your AI agent always has the latest catalog without you refreshing a cache.

Question 8

Can I customize the blocks?

Accepted Answer

Yes — that's the point. Blocks ship as plain TSX with Tailwind classes. Change colors, swap components, rewire data, restructure the layout. Nothing is locked down. If you want a starting point closer to a specific style, check /themes for a curated CSS-variable theme to pair with any block.

Shadcn/ui blocks for every page section.

Every block category

Every block. One prompt away.

Grab your MCP URL

Paste into your editor

Prompt as usual

Frequently Asked Questions