DEV Community: Toby Belhome

I Built a Visual Page Builder for shadcn/ui That Exports Clean Next.js Code

Toby Belhome — Fri, 09 Oct 2026 08:15:53 +0000

Visual page builders have a reputation problem among developers, and it is earned. You drag a few sections around, export, and get a pile of wrapper divs, inline styles, a proprietary runtime and a JSON schema you now have to maintain forever. Most developers try it once and go back to writing JSX by hand.

I wanted the speed of a visual builder without that trade-off. So the Shadcn UI Kit Page Builder has one rule: the exported code must look exactly like code you would write yourself. Plain Next.js pages, plain shadcn/ui blocks, nothing extra to strip out.

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

How it works

Three steps, from an empty page to code in your repository.

1. Add blocks

The builder pulls from the Shadcn UI Kit blocks library: Marketing, E-commerce and Dashboard UI blocks, over 470 of them. Heroes, navbars, feature grids, pricing tables, testimonials, FAQs, footers, product lists, checkout pages, stat cards, charts, tables and forms.

Search the library from a single panel, click a block to add it, or drag it exactly where you want it. Reorder, duplicate and remove blocks as the page takes shape.

You start from proven, designed sections instead of a blank canvas.

2. Edit content right on the canvas

No props panels, no config files. Click any text and type. Swap images, change button styles and link targets, remove the parts of a block you do not need. Every change shows up instantly, and undo and redo are always there.

This is the part that usually takes the longest when you assemble a page by hand: copying a block, opening the file, hunting for the right string, saving, checking the browser. Here it is click and type.

3. Preview every breakpoint

Switch the canvas between desktop, tablet and mobile widths. Blocks render with real breakpoints, so what you see on each device is what your visitors get. Open the live preview to click through every page like a real site.

A whole site, not one landing page

Most block tools stop at a single page. The Page Builder handles multi-page sites:

Add as many pages as your site needs: home, pricing, about, contact, blog, product
Pick which page is the home page
Place the header and footer once in a shared layout, and they appear on every page, exactly like a Next.js layout.tsx

The structure you build is the structure you export.

Export: two options

When you are happy with the result, click Export.

Option 1: Download a Next.js project

You get a zip with a ready-to-run Next.js project. Unzip, install, run:

npm install
npm run dev

Good for new sites, client projects and prototypes you want to deploy right away.

Option 2: Install into your existing app with the shadcn CLI

Already have a Next.js project? The builder gives you a single command that installs all your pages into it:

npx shadcn@latest add https://shadcnuikit.com/r/pb-<project-id>.json

The pages land in their own route group together with the shared header and footer. The CLI also installs every shadcn/ui component the blocks depend on. If you want the exported home page to be your root page, remove your existing app/page.tsx.

The exported blocks are built on Radix UI, so use a Radix based shadcn/ui style in the target project (npx shadcn@latest init --base radix for a fresh one).

What you get in the code

This is the part I care about most. The export contains:

Next.js App Router pages and a layout
The block components you used, with your edited content
The shadcn/ui components they depend on

And nothing else. No builder runtime, no editor code, no wrapper components, no JSON schema. Each block is a normal React component styled with Tailwind CSS v4 and your shadcn/ui theme variables. Open it in your editor and keep working as if you had written it.

Because blocks use the standard theme tokens, you can restyle the whole site by changing your CSS variables, or create a new theme with the Theme Generator.

Saving your projects

When you are signed in, projects are saved to your account automatically. You can open, rename, duplicate or delete them later from your account page. Without an account, projects are saved in your browser, so you can try the builder without signing up.

When to use it

Landing pages and marketing sites for a new product or a launch
Client websites for agencies and freelancers: build the structure with the client, export, then customize in code
Store fronts using the e-commerce blocks
Prototypes you want to click through before writing any code
A starting point for a site that you will keep developing by hand

Builder or AI editor?

Shadcn UI Kit also has an MCP server that lets Claude Code or Cursor assemble pages from the same blocks with a prompt. The two work well together: the builder is better when you want to see and arrange the page yourself, the MCP server when you want to describe it and let the agent do the work. Both produce the same kind of plain block code. More about MCP.

Try it

Building and previewing pages are free, no account needed. Exporting the code comes with the Shadcn UI Kit plans, details are on the pricing page.

👉 Open the Page Builder

If you want a step by step walkthrough, there is also a guide on building a website with shadcn/ui blocks.

What would you want a page builder for shadcn/ui to do next? Leave a comment, feedback goes straight into the roadmap.

527 Free shadcn/ui Component Variants for React (Radix UI and Base UI)

Toby Belhome — Fri, 09 Oct 2026 08:09:57 +0000

shadcn/ui ships one version of each component. One Button, one Input, one Select. That is on purpose: it is a starting point, not a design system.

But real products need more. A button with a loading spinner. An input with a prefix and a clear button. A select with avatars. A file upload with progress bars. A badge with a status dot. Every time you need one of those, you open the shadcn docs, copy the base component and spend 20 minutes adjusting it.

The Shadcn UI Kit components library collects those variations so you do not have to build them again: 532 component variants across 49 components, and 527 of them are free.

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

What "variant" means here

Each variant is a small, focused example built on top of a standard shadcn/ui component. Take the Button page: it has 27 variants of the same Button. All of them use the regular Button from components/ui/button, so nothing changes in your base components.

You get the pattern, not a new dependency.

Built for Radix UI and Base UI

shadcn/ui can now run on two primitive libraries: Radix UI and Base UI. The component variants are written to work with both, so they fit whichever one your project already uses. Everything is styled with Tailwind CSS v4 and the standard shadcn/ui theme variables, so light mode, dark mode and your custom theme apply automatically.

The library at a glance

The 49 components are grouped into five categories:

Category	Variants	Components
Base	168	Button, Button Group, Badge, Avatar, Alert, Alert Dialog, Accordion, Card, Separator, Skeleton, Tooltip
Form	152	Input, Select, Combobox, Calendar, Checkbox, Radio Group, Switch, Textarea, Field, File Upload, Native Select, Toggle
Data Display	102	Tabs, Table, Data Table, Carousel, Item, Command, Collapsible, Bubble, Drawer, Scroll Area, Attachment, Autocomplete
Feedback	66	Spinner, Slider, Sonner Toast, Progress, Empty State, Popover, Hover Card
Navigation	44	Dropdown Menu, Pagination, Sheet, Breadcrumb, Navigation Menu, Context Menu, Menubar

The most useful ones

These are the components with the most variants, and the ones I find myself reaching for in almost every project.

Buttons and actions

Button (27 variants)
Button Group (20)
Badge (17): notification counts and announcement badges
Avatar (21): avatar groups, status badges, tooltips and dropdowns

Forms

Forms are where most UI time goes, and this is the deepest part of the library:

Input (25 variants)
Select (15) and Combobox (12): with avatars, groups, icons, search and multi select
Calendar (15)
Radio Group (15) and Checkbox (13)
File Upload (10): dropzones, multiple files, image previews and chat attachments
Field, Switch, Textarea, Native Select and Toggle

Data display

Tabs (15)
Table (12) and Data Table (6): TanStack Table with sorting, filtering and pagination
Carousel (13): side thumbnails, autoplay, custom dots and progress bars
Command (9): command palettes and quick search
Bubble (7) and Attachment (5): chat messages, reactions and file previews for chat and AI interfaces

Feedback and navigation

Spinner (14), Progress (10) and Slider (13)
Sonner Toast (12)
Empty State (8)
Dropdown Menu (12) and Pagination (12)

How to use a variant

Every variant has a live preview that follows your light or dark theme. When you find one you like, click Get the Code. You have two options:

1. Copy the source. The file is a normal React component. Paste it into your project and import it.

2. Install with the shadcn CLI. Add the registry to your components.json once:

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

Then install any variant by name:

npx shadcn@latest add @shadcnuikit/accordion1

The CLI adds the variant file and any shadcn/ui base components it needs. Free variants do not need an API key. The install command is available for npm, pnpm, yarn and bun.

Customizing

The code lives in your project, so you can change classes, props and markup however you like. Colors come from your theme variables, which means one change in your theme updates every component at once.

If you want a new look, the Theme Generator lets you build a shadcn/ui theme, preview it on real components and export the Tailwind CSS v4 variables.

More than a demo page

Each component page also includes an article covering anatomy, usage, accessibility and common questions. Useful when you are not sure whether you need a Popover or a Hover Card, a Sheet or a Drawer.

And all variants are available through the kit's MCP server, so Claude Code, Cursor and other AI editors can find and install them for you instead of writing a generic version from scratch.

When you need more than components

Components are the smallest building blocks. If you need complete sections or screens, Shadcn UI Kit also has 540+ blocks (heroes, pricing tables, data tables, charts, AI chat), 16 admin dashboards and website templates. Details are on the pricing page.

Wrapping up

shadcn/ui gives you the foundation. These 532 variants give you the patterns you would otherwise rebuild in every project, and almost all of them are free.

👉 Browse all components

Which component variant is missing? Leave a comment and I will add it to the list.

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

Toby Belhome — Fri, 09 Oct 2026 07:41:54 +0000

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:

Pricing Tables: 20 layouts, from simple three tier cards to comparison tables
Testimonials: 15
Navbars: 15, with mobile menus and dropdowns
Hero Sections: 14, including AI prompt heroes and product shot layouts
Feature Sections: 13
Contact Us: 13, some with interactive maps
CTA Sections, Team, Stats, Footers: 12 each
How It Works, FAQs, Newsletter, Integrations and Changelog pages

Dashboard UI blocks (236)

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

Charts: 70 chart cards built on Recharts and shadcn/ui charts
Stat Cards: 33 KPI and metric cards
Modal Dialogs: 28
Tables: 25 data tables powered by TanStack Table, with sorting, filtering and pagination
Form Layouts: 22, with Zod validation
Empty States: 22 (no results, first run, offline, access denied...)
Onboarding Screens: 10 step by step setup flows
Dashboard Dropdowns: 10 (account menus, notification inboxes, workspace switchers)
Dashboard Shells: 9 complete sidebar + header layouts
Plus sign-in forms, page layouts and sidebar layouts

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

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

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>
  );
}

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}"
    }
  }
}

Now you can use short names:

npx shadcn@latest add @shadcnuikit/hero1 @shadcnuikit/faq1

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"

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.

Shadcn Admin: A Production-Ready Admin Dashboard Template for Next.js, Vite and Vue

Toby Belhome — Sun, 09 Aug 2026 14:29:55 +0000

Building an admin panel from scratch is one of those tasks every developer underestimates. The first table is easy. Then come sortable columns, bulk actions, charts, a calendar, dark mode, responsive layouts, and suddenly you have spent three weeks on UI instead of your actual product.

Shadcn Admin solves this with production-ready admin dashboard templates built on shadcn/ui, Tailwind CSS v4 and TypeScript, available for Next.js, Vite + React and Vue 3.

What is Shadcn Admin?

Shadcn Admin is a collection of admin dashboard templates that share one consistent design system. Instead of a generic starter with placeholder pages, each template is a complete, standalone project with realistic pages you would actually ship:

Ecommerce Dashboard: products, orders, customers, analytics, messaging and settings
CRM Dashboard: leads, contacts, deals, opportunity details, tasks, reports and an event calendar

Every page is fully implemented. Tables sort and filter, charts render real series, drawers and dialogs work, and the layout adapts from mobile to desktop.

Why shadcn/ui as the foundation?

If you have used shadcn/ui, you know the appeal: components live in your codebase, not in a locked npm package. Shadcn Admin leans into that philosophy:

You own the code. Every component is plain TypeScript + Tailwind in your project. Restyle it, extend it, delete what you do not need.
No vendor lock-in. There is no proprietary UI kit or runtime dependency to outgrow.
Modern styling. Tailwind CSS v4 with CSS variables, oklch colors and a built-in light/dark theme.

Key features

Data tables powered by TanStack Table: sorting, filtering, row selection and bulk actions
Interactive charts built with Recharts: revenue forecasts, source analytics, sales reports
Drag-and-drop event calendar with month, week, day and agenda views
Built-in messaging and notifications UI
Light and dark mode out of the box
Fully responsive, mobile-first layouts with a collapsible sidebar
Typed end to end with TypeScript

One design, three frameworks

The same dashboards ship for three stacks, so teams are not forced into a framework:

Framework	Stack
Next.js	App Router, React 19, Tailwind CSS v4
Vite	Vite 7, React Router 7, code splitting per route
Vue	Vue 3, Vite, shadcn-vue

The design and features are identical across versions. If you prototype in Vite and later move to Next.js, the UI carries over.

Try the live demos

You do not have to take my word for it. Every template has a live demo:

Licensing

Shadcn Admin uses one-time payments with lifetime free updates. You can buy a single dashboard, every dashboard of one framework, or an all-access bundle that covers current and future templates. Source code is delivered as a download and through private GitHub repository access.

Wrapping up

If your next project needs an admin panel and you would rather spend your time on business logic than on rebuilding tables and charts, Shadcn Admin is worth a look. Explore the templates and live demos at shadcnadmin.com.

What do you look for in an admin template? Let me know in the comments.

Free & Open Source Animated UI Components for Modern Web Projects

Toby Belhome — Sat, 07 Jun 2025 08:05:29 +0000

In today’s fast-paced digital world, eye-catching animations and smooth user interactions can significantly enhance the quality of a web project. Bundui.io offers developers and designers a powerful collection of animated UI components that are easy to implement, fully customizable, and completely open source.

🎨 What is Bundui.io?

Bundui.io is a collection of beautifully crafted, animated UI components built with Tailwind CSS and Framer Motion. It's designed to help developers quickly add dynamic visual elements to their React or Next.js projects with minimal setup.

➡️ Explore the docs: bundui.io/docs/introduction

🧩 Key Components Offered by Bundui

Bundui includes a growing set of reusable animation components, including:

Floating Button

A stylish button that floats over your layout and invites action.

👉 View Demo
Magnetic Button

A magnetic-like button that follows the user's cursor, adding delightful interaction.

👉 View Demo
Count Animation

Animate numbers in a smooth, visually appealing way—great for dashboards or metrics.

👉 View Demo
Marquee Effect

Add scrolling text elements to highlight announcements or headlines.

👉 View Demo
Background Effects

Add animated backgrounds like starfields, snowfall, or meteors for extra visual flair.

⚙️ Easy Setup and Integration

Bundui components are optimized for React and Next.js, making them plug-and-play for modern developers. The documentation walks you through a simple installation process:

➡️ Installation Guide: bundui.io/docs/install-nextjs

🌟 Why Choose Bundui.io?

✅ Open Source – 100% free and MIT licensed
🚀 Modern Tech Stack – Built using Tailwind CSS and Framer Motion
🧩 Highly Customizable – Tweak styles, animations, and layout to fit your project
⚡ Developer-Friendly – Copy-paste ready with minimal boilerplate

🔗 Final Thoughts

If you're building a modern web application and want to level up your UI with animated elements, Bundui.io is the perfect resource. Whether you're enhancing a landing page, dashboard, or SaaS app, Bundui’s lightweight, beautiful components will save you time and boost engagement.

👉 Visit https://bundui.io to explore the full collection and start building today!

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

Toby Belhome — Sun, 16 Mar 2025 06:11:06 +0000

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

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

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

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

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

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

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

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

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}"
    }
  }
}

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

npx shadcn@latest add @shadcnuikit/hero1

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"

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.

What is an Admin Dashboard and What is its Purpose?

Toby Belhome — Sat, 28 Sep 2024 05:03:26 +0000

An admin dashboard can be defined as the administrative interface of a web application. These interfaces are typically designed to facilitate the management of a system or platform, allowing users to perform tasks such as content management, data monitoring, analytics, and system configuration. Dashboards visually present data through graphs, tables, or text, enabling administrators to make quick and informed decisions thanks to their user-friendly design.

What Are Admin Dashboards Used For?

Admin dashboards are widely used in various industries. For example, in an e-commerce site, an admin dashboard helps manage products, track orders, control inventory, and analyze user behavior. Similarly, in a content management system (CMS), the dashboard allows the creation, editing, and publishing of content. Dashboards also facilitate the management of technical tasks such as security settings, user permissions, and system configurations.

Use Cases

Admin dashboards are commonly used for internal reporting, CRM (customer relationship management) systems, web analytics tools, and SaaS (software as a service) platforms. Administrators can monitor real-time data, generate reports, and analyze the overall performance of the system. By using dashboards, businesses can streamline complex processes and improve efficiency across various operations.

Here are some of the best platforms where you can find top-quality admin templates:

Shadcn UI Kit

The Shadcn UI Kit is a powerful option for creating admin dashboards. With customizable components and Tailwind CSS integration, it allows for the development of modern and fast admin panel templates. It’s a flexible solution designed for high performance and responsive layouts.

Visit: shadcnuikit.com

ThemeForest

ThemeForest is one of the largest premium theme and template marketplaces, offering a wide range of admin dashboard templates. It provides templates for different frameworks such as Bootstrap, React, Angular, and Vue.js.

Visit: https://themeforest.net

Creative Tim

Creative Tim offers both free and premium dashboard templates. It provides templates for popular technologies like Bootstrap, React, Vue.js, and Angular. Their templates are known for modern, aesthetically pleasing, and user-friendly designs.

Visit: creativetim.com

GitHub

GitHub hosts a large number of open-source admin dashboard templates. These templates are typically maintained by developers and are available for free. You can also customize these projects to fit your specific needs.

Visit: github.com

WrapPixel

WrapPixel provides modern and clean admin dashboard templates. With both free and premium options, you can find templates suitable for simple or advanced admin panels.

Visit: wrappixel.com

BootstrapMade

BootstrapMade offers Bootstrap-based admin templates that are fast and easy to integrate. They provide both free and premium options for various types of projects.

Visit: bootstrapmade.com

AdminLTE

AdminLTE is an open-source admin panel template built with Bootstrap. It’s widely used by developers due to its simplicity and customizability.

Visit: adminlte.io

Shadcn UI Kit - Admin Dashboard and Website Templates

Toby Belhome — Wed, 18 Sep 2024 11:12:39 +0000

The Shadcn UI Kit is a comprehensive collection of pre-designed, multi-purpose dashboards, website templates, and components. It goes beyond the standard offerings of Shadcn, providing more advanced designs and functionality for those who need more than just the basics.

Unique Dashboard Templates

Shadcn UI Kit offers a variety of carefully crafted dashboard templates. Currently, 7 dashboard templates are available, and many more will be added over time. There are templates for e-commerce, crypto, project management, CRM, academy, and online courses. The source code is available on our GitHub account, and we also provide a free version of these templates.

Previews

Why choose the Shadcn UI Kit?

The Shadcn UI Kit saves you hours of design and development time. Inside, you'll find templates and components tailored to specific needs, eliminating the hassle of coding everything from scratch. All you need to do is focus on data binding while we take care of the rest. Streamline your process and let us handle the heavy lifting!

What's included in the package?

Dashboards and sub pages
Website templates
Premium components

Get Shadcn UI Kit

Website: https://shadcnuikit.com
Twitter: https://x.com/TobyBelhome
Github: https://github.com/bundui