DEV Community

Toby Belhome
Toby Belhome

Posted on

543 shadcn/ui Blocks: Build a Landing Page or Dashboard in an Afternoon

#nextjs #react #shadcn #tailwindcss

shadcn/ui gives you excellent primitives: Button, Card, Dialog, Table. But nobody ships a Button. You ship a hero section, a pricing table, a checkout page, a dashboard with stat cards and a data table. And turning primitives into good looking, responsive sections is where the hours disappear.

That gap is what blocks fill. A block is a complete, ready-made section built from shadcn/ui components. You drop it into your page, change the copy, and move on.

In this post I will walk through the Shadcn UI Kit blocks library, which now has 543 blocks, and show how to build a real page from them in a few minutes, by hand or with an AI editor.

Shadcn UI Kit is an independent product built on shadcn/ui. It is not the official shadcn project.

What is in the library

The 543 blocks are organized by where you actually use them:

Category Blocks What you get
Dashboard UI 236 Charts, stat cards, tables, forms, dialogs, shells, onboarding, empty states
Marketing 178 Heroes, pricing, features, testimonials, navbars, footers, FAQs
Application UI 70 AI chat, chat UI, mail, kanban, Gantt, calendar, todo, maps
E-commerce 59 Product lists, product details, cart, checkout, reviews

Every block uses the standard shadcn/ui theme tokens (bg-background, text-muted-foreground, border and so on), so light and dark mode work out of the box and your own theme applies everywhere without touching the block code.

Marketing blocks (178)

Everything you need for a landing page or SaaS website:

Dashboard UI blocks (236)

The biggest category, and the one that saves the most time, because dashboard UI is tedious to get right:

Application UI blocks (70)

Full app screens, the kind that normally take days each:

  • AI Chat: 21 blocks built with AI Elements: chat homes with history sidebars, composers with attachments, model pickers, thinking states
  • Map View: 11 interactive MapLibre maps: property search, store locators, delivery tracking, route planners
  • Chat UI: 10 messengers, support inboxes and video call screens
  • Mail App: 8 email clients, including a sales inbox with AI summaries
  • Kanban Board: 7 with drag and drop
  • Todo App, Event Calendar (month, week, day, agenda) and Gantt Chart

E-commerce blocks (59)

Product cards, categories, customer reviews, product lists, product details, checkout, shopping cart, quickviews and store navigation. Enough to put together a full storefront.

Previewing a block

Each category page shows every block in a live iframe, not a screenshot. For any block you can:

  • Switch the preview between desktop, tablet and mobile widths
  • Toggle light and dark mode
  • Apply a theme you saved in the Theme Generator to see the block in your brand colors
  • Open it full screen
  • Click Get the Code to see the source and the install command for npm, pnpm, yarn and bun

Tutorial: a landing page in 5 minutes (free blocks only)

17 blocks are completely free, no account needed. Let's build a small landing page with four of them.

1. Start a Next.js project with shadcn/ui 

npx create-next-app@latest my-landing
cd my-landing
npx shadcn@latest init --base radix
Enter fullscreen mode Exit fullscreen mode

The blocks are built on Radix UI primitives, so pick Radix as the component library.

2. Install the blocks

Every block has a registry URL, so you can install it directly with the shadcn CLI:

npx shadcn@latest add \
  https://shadcnuikit.com/r/hero1.json \
  https://shadcnuikit.com/r/how-it-works9.json \
  https://shadcnuikit.com/r/faq1.json \
  https://shadcnuikit.com/r/newsletter1.json
Enter fullscreen mode Exit fullscreen mode

The CLI also installs the shadcn/ui components each block needs (button, accordion, card, input, label), so you do not have to track dependencies yourself. The blocks land in components/ as regular files you own.

3. Compose the page 

// app/page.tsx
import HeroSection from "@/components/hero1";
import HowItWorksSection from "@/components/how-it-works9";
import FAQSection from "@/components/faq1";
import Newsletter1 from "@/components/newsletter1";

export default function Home() {
  return (
    <main>
      <HeroSection />
      <HowItWorksSection />
      <FAQSection />
      <Newsletter1 />
    </main>
  );
}
Enter fullscreen mode Exit fullscreen mode

Run npm run dev and you have a responsive, dark mode ready landing page. Now edit the copy, and you are done.

Shorter install names

If you install blocks often, add the registry to components.json once:

"registries": {
  "@shadcnuikit": {
    "url": "https://shadcnuikit.com/r/{name}.json",
    "headers": {
      "Authorization": "Bearer ${REGISTRY_TOKEN}"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Now you can use short names:

npx shadcn@latest add @shadcnuikit/hero1 @shadcnuikit/faq1
Enter fullscreen mode Exit fullscreen mode

Free blocks work without a token. For premium blocks you put the API key from your account into .env as REGISTRY_TOKEN.

The free blocks

Here is the full list of free blocks you can install right now:

  • Marketing: hero1, how-it-works9, faq1, newsletter1, newsletter3
  • Dashboard UI: tables1 to tables7 (seven TanStack data tables), stat-card1, signin-form1, dashboard-modal12
  • Application UI: todo-app1, ai-chat1

Don't want to write imports? Use the Page Builder

The Page Builder lets you do the same thing visually. Pick blocks from the library, stack them into pages, build a multi-page site, then:

  • Export a complete Next.js project as a zip, or
  • Add the pages to your existing app with a shadcn CLI command

The exported code contains only your blocks. No builder runtime, no wrapper components, nothing you have to remove later.

Or let your AI editor do it (MCP)

AI editors are good at writing code, but they tend to produce the same generic UI every time. Shadcn UI Kit runs a remote MCP server, so Claude Code, Cursor and VS Code can search the blocks library and install real blocks instead of inventing sections from scratch.

Setup for Claude Code:

claude mcp add --transport http shadcnuikit https://shadcnuikit.com/api/mcp \
  --header "Authorization: Bearer YOUR_API_KEY"
Enter fullscreen mode Exit fullscreen mode

Then just describe what you want:

"Build a landing page for my invoicing SaaS: navbar, hero with a product screenshot, three features, a pricing table with monthly and yearly plans, testimonials, FAQ and footer."

The agent calls plan_page to choose a matching set of blocks, get_item_code to fetch their source, writes the files and adapts the copy to your product. You get a page that looks designed, built from blocks you can still edit by hand. MCP setup guide.

Free vs premium

Free Premium
Blocks 17 All 543
Install with shadcn CLI ✅ ✅
Page Builder export ❌ ✅
MCP server for AI editors ❌ ✅
Future blocks ✅ free ones ✅ all, for life

Premium blocks come with every Shadcn UI Kit plan. It is a one-time payment with lifetime updates, and the same license also unlocks 16 admin dashboards, 17 dashboard apps, 530+ component variants and 6 website templates. Commercial and client projects are allowed, no attribution required.

Quick math: if a polished pricing section takes you two hours and a good data table takes a day, the Pro plan pays for itself before you finish the first page.

Wrapping up

Blocks are the missing layer between shadcn/ui primitives and a finished product. With 543 of them across marketing, e-commerce, dashboards and apps, plus the CLI, the Page Builder and the MCP server, you can spend your time on what makes your product different instead of on the 20th hero section of your career.

👉 Browse all 543 blocks (start with the 17 free ones)

What kind of block do you rebuild in every project? Tell me in the comments, the most requested ones go into the next release.

Top comments (0)