550+ Shadcn UI Blocks, Free & Premium
Production-ready shadcn/ui blocks for marketing sites, online stores and admin dashboards: hero sections, pricing tables, feature grids, product listings, data tables and more. Every block works with Radix UI and Base UI. Preview it live, copy the code or install it with the shadcn CLI, then build full pages in the Page Builder or straight from your AI editor with the MCP server.
Hero Section
26 blocks
Call to Action
+1 new12 blocks
Changelog Page
4 blocks
Pricing Table
+13 new20 blocks
Feature Section
13 blocks
Testimonials
15 blocks
Team Sections
12 blocks
Integrations
+1 new7 blocks
Newsletter Sections
8 blocks
Contact Us
13 blocks
How It Works
+1 new11 blocks
Stats
12 blocks
FAQs
10 blocks
Footers
12 blocks
Navbars
15 blocks
Checkout Page
New5 blocks
Product List
8 blocks
Product Category
9 blocks
Product Cards
11 blocks
Product Details
7 blocks
Product Features
2 blocks
Shopping Cart
New4 blocks
Promo Sections
1 block
Store Navigation
1 block
Customer Reviews
New9 blocks
Product Quickviews
2 blocks
Form Layouts
+20 new22 blocks
Charts
+50 new70 blocks
Signin Forms
3 blocks
Stat Cards
+25 new33 blocks
Modal Dialogs
28 blocks
Page Layouts
3 blocks
Sidebar Layouts
1 block
Dashboard Shell
New9 blocks
Onboarding Screens
New10 blocks
Dashboard Dropdowns
+10 new10 blocks
Tables
+7 new25 blocks
Empty State
+22 new22 blocks
Map View
+11 new11 blocks
Gantt Chart
+3 new3 blocks
Kanban Board
+7 new7 blocks
Mail App
+8 new8 blocks
Chat UI
+10 new10 blocks
Event Calendar
+4 new4 blocks
Todo App
+6 new6 blocks
AI Chat
+21 new21 blocks
Shadcn UI Blocks and Sections for Faster Page Building
Shadcn UI Kit offers 555 production ready blocks built with shadcn/ui, Tailwind CSS and React. Preview each block live on desktop, tablet and mobile, then copy the code or install it with the shadcn CLI. Start with the free blocks or unlock every block with All Access.
What Are Shadcn Blocks?
A block is a complete section of a page or app screen, built by combining several shadcn/ui components. Where a component is a single button, input or card, a block is the finished pricing section, checkout form or data table that uses them. You drop it into your project and change the content instead of designing the layout from scratch. Typical blocks include:
- Landing page sections such as heroes, features, pricing, testimonials and footers
- Ecommerce sections such as product cards, product details, carts and checkout pages
- Dashboard building blocks such as stat cards, charts, tables, forms and sidebar layouts
- Complete application screens such as map views and gantt charts
Block Categories
Blocks are organized into four groups, each with its own categories and live previews. Open a group to see every category.
Sections for landing pages and websites. Browse all marketing blocks.
- Hero Section
- Opening sections with a headline, supporting text, call to action buttons and visuals. 26 blocks.
- Call to Action
- Focused sections that move visitors toward a signup, demo or purchase. 12 blocks.
- Changelog Page
- Release notes layouts for announcing product updates, fixes and new features. 4 blocks.
- Pricing Table
- Plan comparison sections with pricing tiers, feature lists and upgrade buttons. 20 blocks.
- Feature Section
- Grids and layouts that present your product's key features and benefits. 13 blocks.
- Testimonials
- Customer quote sections that build trust and credibility. 15 blocks.
- Team Sections
- Sections that introduce your team members with photos and roles. 12 blocks.
- Integrations
- Logo grids and cards that show the tools and platforms your product connects to. 7 blocks.
- Newsletter Sections
- Email signup sections that grow your mailing list. 8 blocks.
- Contact Us
- Contact sections with forms, maps and other ways to reach your team. 13 blocks.
- How It Works
- Step by step sections that explain how your product works. 11 blocks.
- Stats
- Metric sections that highlight key numbers and social proof. 12 blocks.
- FAQs
- Question and answer sections that handle common customer concerns. 10 blocks.
- Footers
- Site footers with navigation links, contact details, social links and newsletter forms. 12 blocks.
- Navbars
- Responsive top navigation bars with mobile menus, dropdowns and search. 15 blocks.
Product, cart and checkout sections for online stores. Browse all ecommerce blocks.
- Checkout Page
- Checkout pages with shipping forms, payment steps and order summaries. 5 blocks.
- Product List
- Product grids and lists with filters for browsing a catalog. 8 blocks.
- Product Category
- Category pages that group products with images, prices and quick actions. 9 blocks.
- Product Cards
- Product cards with images, color swatches, ratings, wishlist buttons and prices. 11 blocks.
- Product Details
- Product pages with image galleries, specifications, reviews and purchase options. 7 blocks.
- Product Features
- Sections that highlight a product's key features and benefits. 2 blocks.
- Shopping Cart
- Cart views with item lists, quantity controls and discount codes. 4 blocks.
- Promo Sections
- Promotional sections with a headline, offer highlight and call to action. 1 block.
- Store Navigation
- Store menus with categories and links for browsing products. 1 block.
- Customer Reviews
- Review sections with ratings and buyer testimonials for product pages. 9 blocks.
- Product Quickviews
- Quick view dialogs and drawers that preview a product without leaving the list. 2 blocks.
Building blocks for admin panels and internal tools. Browse all dashboard blocks.
- Form Layouts
- Form layouts with Zod validation for settings, profiles and data entry. 22 blocks.
- Charts
- Interactive Recharts charts for dashboards and analytics. 70 blocks.
- Signin Forms
- Sign in forms with validation and social login options. 3 blocks.
- Stat Cards
- Cards that display key metrics, KPIs and analytics at a glance. 33 blocks.
- Modal Dialogs
- Dialogs for confirmations, forms and focused content. 28 blocks.
- Page Layouts
- Full page layouts that combine a sidebar and a header. 3 blocks.
- Sidebar Layouts
- Sidebar based layouts for app navigation and structure. 1 block.
- Dashboard Shell
- App shells with an inset sidebar, grouped navigation, user menu and header. 9 blocks.
- Onboarding Screens
- Guided setup flows with steps, a progress indicator and a completion state. 10 blocks.
- Dashboard Dropdowns
- Top bar menus for accounts, notifications, inboxes, carts and workspace switching. 10 blocks.
- Tables
- Data tables built with TanStack Table, with filtering and pagination. 25 blocks.
- Empty State
- Screens for no results, no data, first run, offline and access denied states. 22 blocks.
Complete, full screen app interfaces. Browse all application blocks.
- Map View
- MapLibre map screens for property search, store locators, delivery tracking and routes. 11 blocks.
- Gantt Chart
- Gantt charts for roadmaps, project schedules and resource planning with drag to reschedule. 3 blocks.
- Kanban Board
- Drag and drop boards for tasks, sales pipelines and team workspaces. 7 blocks.
- Mail App
- Email client screens with inboxes, folders, labels, search and compose. 8 blocks.
- Chat UI
- Messaging screens for team chats, support inboxes, AI agents and video calls. 10 blocks.
- Event Calendar
- Calendars with month, week, day and agenda views and drag and drop events. 4 blocks.
- Todo App
- Task apps with status tabs, priorities, due dates, assignees and subtasks. 6 blocks.
- AI Chat
- AI chat interfaces with history sidebars, file attachments, model pickers and thinking states. 21 blocks.
Use Cases
- SaaS websites
- Build a landing page, pricing page and changelog from marketing blocks that share one design language.
- Admin dashboards
- Combine a dashboard shell with stat cards, charts and tables to ship an internal tool in days.
- Online stores
- Use product, cart and checkout blocks as the storefront for Shopify, Medusa, Stripe or your own API.
- Product features
- Add map views, gantt charts, multi step forms and settings pages to an existing app.
- Startup MVPs
- Validate an idea fast with ready made screens, then refine the code as the product grows.
- Client projects
- Deliver consistent websites and dashboards for clients without rebuilding the same sections every time.
Build Pages with AI Editors and the Page Builder
Connect Claude Code, Cursor or VS Code to the Shadcn UI Kit MCP server and ask your assistant for a pricing page or a dashboard. It searches the catalog and installs real blocks from this library instead of generating UI from scratch. Prefer a visual workflow? Arrange blocks into multi-page sites in the Page Builder, edit the content in the browser and export a clean Next.js project.
Why Developers Choose Shadcn UI Kit Blocks
- Built on shadcn/ui: Blocks use the same components you already have in your project, so there is no new UI library to learn.
- Composable by design: Blocks combine without layout, spacing or style conflicts and pair naturally with our components and templates.
- Real interactions: Forms validate with Zod, tables sort and filter, maps sync with their lists and gantt bars can be dragged.
- Radix UI and Base UI support: Every block is compatible with both Radix UI and Base UI primitives.
- Responsive and dark mode ready: Every block adapts from mobile to desktop and follows your light and dark theme without extra configuration.
- Typed and readable code: Clean TypeScript with sample data in plain arrays at the top of each file, easy to replace with your own.
- Works with Next.js: Fully compatible with Next.js App Router projects and other modern React setups.
Free Blocks and All Access
17 blocks are free, so you can try the code quality and structure in your own project before you buy. Every other block is part of All Access, a one time payment with lifetime access and free updates, including new blocks as they are released.
All Access also includes our admin dashboard templates, website templates and examples. Use the free Theme Generator to match your brand and the Page Builder to arrange blocks into full pages and export the code.
Frequently Asked Questions
Components are single interface elements such as buttons, inputs and dialogs. Blocks are complete sections or screens built from those components, such as a pricing section, a checkout page or a dashboard table, ready to drop into a page.
Blocks are grouped into Marketing, Ecommerce, Dashboard UI and Application UI, covering landing page sections, store pages, admin panel widgets and complete app screens such as map views and gantt charts.
17 blocks are free. The remaining blocks are unlocked with the All Access plan, a one time payment with lifetime access and free updates.
Copy the code from the block preview, or install the block with the shadcn CLI command shown next to it. The code lands in your repository as plain React, TypeScript and Tailwind CSS.
Yes. Every block is built with React, TypeScript and Tailwind CSS and works in Next.js App Router projects as well as other modern React setups.
Yes. All blocks are compatible with both Radix UI and Base UI primitives, so you can pick the primitive library that fits your stack.
Completely. The code lives in your project, so you can change the layout, content, colors and behavior. Styling uses Tailwind CSS utilities and the CSS variables from your theme.
Yes. Blocks use theme tokens instead of fixed colors, so they follow your light and dark theme automatically.
Yes. An All Access license lets you use the blocks in an unlimited number of personal and commercial projects, including client work.
Yes. All Access includes free lifetime updates, so every new block and category added to the library is available to you at no extra cost.
No. Shadcn UI Kit is an independent product by Bundui and is not affiliated with shadcn. shadcn/ui is a free, open source component library. Shadcn UI Kit is built on top of it and adds ready-made blocks, templates and admin dashboards that use the same components.
17 of the 555 blocks are free. They include hero, newsletter, FAQ and how it works sections, sign in forms, stat cards, modal dialogs, tables, a todo app and an AI chat. The rest are part of All Access.
No. You can open the code of a free block in its preview without signing in, or install it with the shadcn CLI after adding the Shadcn UI Kit registry to your components.json. No API key is needed for free blocks.
Yes. Connect your editor to the Shadcn UI Kit MCP server with the API key from your account. Your assistant can then search the catalog and add real blocks to your project instead of generating UI from scratch.
Yes. The Page Builder lets you arrange blocks into multi-page sites, edit the content in the browser and export a clean Next.js project or install the pages with the shadcn CLI.