Blocks
Blocks are complete page sections built from shadcn/ui components: hero sections, pricing tables, product grids, checkout pages, dashboard shells, data tables, kanban boards and more. A few are free, the rest are part of the Pro, Team and Enterprise plans.
How blocks are organized
| Group | What you find |
|---|---|
| Marketing | Sections for landing pages and websites: heroes, features, pricing, testimonials, FAQs, navbars and footers. |
| Ecommerce | Product lists and cards, product pages, carts, checkout and reviews. |
| Dashboard UI | Building blocks for admin panels: shells, sidebars, stat cards, charts, tables, forms and dialogs. |
| Application UI | Full screen app interfaces: maps, gantt charts, kanban boards, mail, chat, calendars and AI chat. |
Every category page explains when to use each block and answers common questions about it.
Preview tools
Each block preview has a toolbar to switch between desktop, tablet and mobile widths, toggle dark mode, open the block in full screen and open Get the Code.
Install a block
npx shadcn@latest add @shadcnuikit/hero1
Free blocks install without a key. Premium blocks need the API key from your account. See shadcn CLI. When you are signed out, the code of a premium block is locked and shows an upgrade dialog instead.
Some blocks use extra libraries, such as recharts for charts, motion for animations or @tanstack/react-table for data tables. Install them if your project does not have them yet.
Build full pages
To combine blocks into pages without writing layout code, use the Page Builder. To let an AI editor pick blocks for you, connect the MCP Server.