DEV Community

Toby Belhome
Toby Belhome

Posted on Edited on

Shadcn UI Kit: 16 Admin Dashboards, 540+ shadcn/ui Blocks and an MCP Server for Next.js (2026)

Every new project starts the same way. You install shadcn/ui, add a sidebar, build the first data table, wire up a chart, and before you know it, two weeks are gone and you still have not touched the feature your users are waiting for.

Shadcn UI Kit exists to skip those two weeks. It is a large collection of admin dashboards, web apps, website templates, blocks and components built on top of shadcn/ui, so you start from finished screens instead of an empty page.tsx.

Quick note: Shadcn UI Kit is an independent product by Bundui. It is built on shadcn/ui, the free open source library, but it is not the official shadcn project.

The stack

Everything in the kit uses the same modern, boring-in-a-good-way stack:

  • Next.js 16 with the App Router
  • React 19
  • Tailwind CSS v4 with CSS variables and oklch colors
  • shadcn/ui components (Radix UI and Base UI variants)
  • TypeScript end to end
  • TanStack Table for data grids, Recharts for charts

The code lives in your repository, not inside a locked npm package. You can restyle it, rename it, delete what you do not need, and nothing breaks on the next update of some vendor library.

What is inside (by the numbers)

What Count
Admin dashboards 16
Dashboard web apps 17
Blocks and page sections 540+ (17 free)
Component variants 530+
Real-world examples 70
Website templates 6 (1 free)
Animated illustrations 36

On top of the content there are three tools that make the kit more than a folder of components: a Page Builder, a Theme Generator and an MCP server for AI editors. More on those below.

16 admin dashboards with live demos

Each dashboard is a complete page with realistic data, working tables, charts, filters and dark mode. Click through any of them before you spend a cent.

🏢 CRM Dashboard: customer relationships, sales pipeline and performance metrics
View live demo

CRM Dashboard

🛒 E-commerce Dashboard: sales, orders, products and customers
View live demo

E-commerce Dashboard

📈 Website Analytics Dashboard: traffic, earnings and user data
View live demo

Website Analytics Dashboard

📂 Project Management Dashboard: tasks, deadlines and team efficiency
View live demo

Project Management Dashboard

📁 File Manager Dashboard: files, folders and storage status
View live demo

File Manager Dashboard

💰 Crypto Dashboard: portfolios, wallets and market trends
View live demo

Crypto Dashboard

🎓 Academy / School Dashboard: courses, student success and learning paths
View live demo

Academy Dashboard

🏥 Hospital Management Dashboard: patient visits, appointments and reports
View live demo

Hospital Management Dashboard

New since the first version of this post

The collection has doubled. These eight dashboards were added since this article was first published:

  • 🧭 Classic Dashboard: revenue, subscriptions and team activity (demo)
  • 💼 Sales Dashboard: sales metrics, revenue and order status (demo)
  • 🏦 Finance Dashboard: income, expenses and savings goals (demo)
  • 💳 Payment Dashboard: balances, transaction history and exchange rates (demo)
  • 👥 HR Dashboard: attendance, leave requests, KPIs and meetings (demo)
  • 🏠 Real Estate Dashboard: listings, sales analytics and leads, with list, filter and detail pages (demo)
  • 🏨 Hotel Management Dashboard: reservations, revenue and guest bookings (demo)
  • 🤖 AI Analytics Dashboard: token consumption, model usage, costs and member activity (demo)

Every dashboard also comes with shared pages you would otherwise build yourself: login and register screens, user profile, settings, orders, products, pricing, onboarding flow, notifications, empty states and error pages.

17 web apps, ready to drop into your product

Dashboards show numbers. Apps are where users actually work. The kit ships 17 complete app screens:

AI apps

  • 🤖 AI Chat and AI Chat V2: chat interfaces with history, model picker and attachments (demo, V2 demo)
  • 🎨 AI Image Generator: prompt, settings and gallery UI (demo)
  • 🎤 Text to Speech: voice selection and audio output (demo)
  • ⚡ Workflow Automation: a drag and drop builder for triggers and actions (demo)

Productivity and business apps

  • 📌 Kanban Board (demo)
  • ✅ Tasks (demo) and Todo List (demo)
  • 📅 Event Calendar (demo)
  • 📝 Notes (demo)
  • 📧 Mail (demo)
  • 💬 Chat (demo)
  • 📁 File Manager (demo)
  • 🔑 API Keys (demo)
  • 💳 POS System for restaurants and stores (demo)
  • 🎓 Courses (demo)
  • ⛱ Social Media (demo)

If you are building a SaaS, an internal tool or a client project, there is a good chance one of these is 80% of a screen you were about to build.

540+ blocks for every kind of page

Blocks are page sections you compose into full pages. They are grouped by where you use them:

  • Marketing: hero sections, feature sections, pricing tables, testimonials, CTAs, FAQs, stats, team, integrations, newsletter, contact, navbars, footers, changelog pages
  • E-commerce: product lists, product details, product cards, quickviews, shopping cart, checkout, store navigation, customer reviews, promo sections
  • Dashboard UI: stat cards, data tables, charts, form layouts, sign-in forms, modal dialogs, dashboard shells, sidebar layouts, dropdown menus, onboarding screens, empty states
  • Application UI: AI chat, chat UI, mail app, kanban board, Gantt chart, event calendar, todo app, interactive map views

17 blocks are free, so you can check the code quality yourself before buying. Browse all blocks.

Install anything with the shadcn CLI

Every component, block, example and illustration is published in a shadcn registry called @shadcnuikit. Add it to your components.json once:

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

Then install items the same way you install official shadcn/ui components:

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

Free items work without a key. For premium items you put the API key from your account into .env as REGISTRY_TOKEN. The files land in your project like any other shadcn/ui component: no wrapper package, no runtime dependency.

Build with AI: the Shadcn UI Kit MCP server

This is the feature I am most excited about. AI editors are great at writing code, but left alone they produce the same generic UI every time. The kit runs a remote MCP server, so Claude Code, Cursor, VS Code and any MCP client can search the catalog and pull real kit blocks, components and dashboard pages into your project instead of inventing them.

For Claude Code it is one command:

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

Cursor (.cursor/mcp.json) and VS Code (.vscode/mcp.json) use the same URL and header. After that you can prompt things like:

"Build a pricing page for my SaaS with a hero, a 3 tier pricing table, an FAQ and a footer."

"Add a CRM dashboard to this project."

The MCP tools (search_catalog, plan_page, get_item_code, list_dashboards, get_dashboard) let the agent plan the page, pick matching blocks and write the actual source files. The output looks like a designed product, not like a default AI demo. Setup guide.

Page Builder and Theme Generator

  • Page Builder: put together multi-page sites visually from the blocks library, then export a clean Next.js project or add the pages to your app with the shadcn CLI. The exported code contains only the blocks, no builder code.
  • Theme Generator: create a shadcn/ui theme, preview it on real components and export the Tailwind CSS v4 variables. Every dashboard, block and template follows the same tokens, so one theme restyles everything.

6 Next.js website templates

Not every project is a dashboard. The kit also includes complete website templates:

  • Cosmic: SaaS landing page
  • Signalry: animated landing page for AI and SaaS products
  • Shopcn: e-commerce storefront for independent brands
  • Soho: chat and messaging app
  • Neofolio: dashboard style portfolio
  • Waitly: waitlist page, free

Who is it for?

  • SaaS founders and indie hackers who want a polished admin and marketing site this week, not next month
  • Agencies and freelancers who ship admin panels for clients and want one consistent codebase to start from
  • Product teams building internal tools, back offices and AI features
  • Developers using AI editors who want Claude Code or Cursor to generate production quality UI

Pricing: pay once, keep everything

There is no subscription. You pay once and get lifetime access plus every future update, including new dashboards, apps and blocks.

Plan Price Users Best for
Pro $129 $79 1 Solo developers and freelancers
Team $399 $199 10 Small teams and agencies
Enterprise $699 $499 Unlimited Larger companies

Every paid plan includes all 16 dashboards, 17 apps, all premium blocks, examples, templates and illustrations, the Page Builder, the MCP server, unlimited Theme Generator, private GitHub repository access and unlimited projects. Commercial and client projects are allowed, and no attribution is required.

🔥 October Sale: the discounted prices above are live until November 3, 2026. See pricing

For context: building just one of these dashboards properly (responsive, dark mode, sortable tables, real charts) takes days. The Pro plan costs less than a single day of developer time.

Try it for free first

Not ready to buy? Start with the free stuff:

  • ⭐ Free version on GitHub (432+ stars)
  • 🧩 17 free blocks and the free component variants, installable with the shadcn CLI
  • 🌍 Free templates
  • 👀 Every dashboard and app above has a live demo you can click through

Wrapping up

shadcn/ui gave us great primitives. Shadcn UI Kit gives you the finished screens built from them: 16 dashboards, 17 apps, 540+ blocks and an MCP server that lets your AI editor use all of it. If you would rather spend your time on business logic than on rebuilding tables, charts and pricing sections, it is worth a look.

👉 Explore Shadcn UI Kit

Which dashboard or app would you like to see next? Let me know in the comments, the roadmap is driven by what people ask for.

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.