Changelog

Added 193 new blocks

You can now save blocks, components, and pages into named collections and install a whole set with one shadcn CLI command.

Bookmark items from any block, component, or page detail view, then open My Collections to organize them.

What you can do

• Create collections — Name a collection, add a short description, and edit or delete it later.
• Save as you browse — Use the bookmark control to add or remove an item from a collection.
• Mix types — Keep blocks, components, and pages in the same collection.
• Install with the CLI — Copy a single shadcn command from a collection. Items you do not have access to stay out of the command until you upgrade.

My Collections

A restaurant template built on shadcn/ui and Tailwind, with a menu that lists a price and calorie count per item, an order cart that persists in the browser, and MDX news and legal pages. Available in both Next.js and Astro editions.

Munch product page

We've launched a sister site for Vue: shadcnblocksvue.com. It's a dedicated catalog of 1,400+ blocks built on shadcn-vue — same team and design bar, not a tab on this site.

shadcnblocks.com stays React. If a block has a Vue counterpart, you'll see a Vue link in the block page toolbar.

Why Vue has its own site · shadcnblocksvue.com

Shadcn Admin Kit v2.3.0 adds a full Payment Processor app under /payment-processor/*, plus calendar/date fixes and hydration polish. Kit version bumped to 2.3.0.

Payment Processor App

Adds a full Payment Processor section integrated into the admin sidebar and app shell.

Dashboards (6 variants)

• Dashboard 1 — Ops command center with live volume metrics, activity charts, and quick actions
• Dashboard 2 — Expanded analytics layout with payment queues and command actions
• Dashboard 3 — Insights carousel, recent activity, and chart-heavy overview
• Dashboard 4 — Payment mix overview and visitor/location analytics
• Dashboard 5 — Geography map, user retention matrix, and recent client payments
• Dashboard 6 — Routing globe, payment-method insights, and themed analytics rails

Transactions

• Transactions / Transactions List 2 — Searchable, tabbed transaction tables with sticky columns and status filters
• Transaction Detail / Detail 2 — Branded detail layouts with copy-to-clipboard actions, alerts, and summary panels

Customers

• Customers / Customers List 2 — Filtered customer directories with status badges and metric icon frames
• Customer Detail 1–3 — Profile headers, invoice accordions, subscriptions, and transaction history variants
• Enterprise Client Detail — Large-account detail view with expanded client context

Subscriptions

• Subscriptions 1–4 — Health dashboard, monitor/ops tables, plan views, and activity rails
• Create Subscription — Multi-section editor with live subscription preview ribbon
• Subscription Detail — Metrics overview, paginated transactions/subscribers, and activity timeline

Invoices

• Invoice List 1–5 — Chart-backed lists, split previews, status filters/tabs, and status stamps
• Create Invoice 1–2 — Item editors with drag-and-drop, tax/terms/payment reference fields, and footer draft/PDF actions
• Create Invoice 3 — Live PDF invoice prototype (@react-pdf/renderer, Stripe-style layout)
• Invoice Detail 1–3 — Theme-aware previews with payment details, download actions, and aside layouts

Developers

• Webhooks — Webhook management UI for payment events
• Payment Workflow — Workflow / pipeline visualization
• Delivery Simulator — Event delivery simulation screen

Shared infrastructure

• Sidebar nav group: Payment Processor (Dashboard, Transactions, Customers, Subscriptions, Invoices, Developers)
• Map/globe visuals: cobe, leaflet / react-leaflet, d3-scale, GeoJSON country data
• Theme-aware charts, badges, and status stamps across payment views
• Mock data / front-end UI kit only — no backend

Calendar & date fixes

• Refactored Calendar structure and styling
• Simplified DateRangePicker alignment and date handling
• Removed standalone DateInput in favor of the shared date stack
• Minor project-management detail divider polish

Style regression & hydration polish

• Stabilized Radix hydration IDs
• Stabilized Dashboard 3 charts; aligned dashboard actions and chart legends
• Polished payment processor views and docked dashboard rail actions
• Lint/format pass across payment processor components

At a glance

Front-end UI kit only — mock data, no backend — consistent with the rest of the admin template.

Admin Kit overview

Added 95 new blocks

A premium roofing and home services template built on shadcn/ui and Tailwind, featuring before/after image sliders, an inline booking calendar, and MDX-driven services and blog. Available in both Next.js and Astro editions.

Apex product page

Every shadcn theme now ships with a portable DESIGN.md — brand guidelines written for humans and coding agents. Copy it into your project root (or .agents/) so Cursor, Claude, and other AI tools stay on-brand while they generate UI.

What's inside each DESIGN.md

• Colors — primary, secondary, surfaces, sidebar, charts, and dark-mode pairs as official shadcn CSS variables
• Typography — display, body, label, and mono stacks with size/weight guidance
• Layout & spacing — rhythm, gutters, radius tokens, and section pacing
• Taste rules — what the theme is for, what to avoid, and how agents should apply it

How to use it

1. Open any theme page (e.g. Alpine or Vercel)
2. Scroll to the Brand guidelines · DESIGN.md section
3. Click Copy DESIGN.md and paste into your repo
4. Install the theme tokens with the CLI:

npx shadcn@latest add @shadcnblocks/theme/alpine

Tokens style your app; DESIGN.md tells agents how to design with them.

Browse Themes | Read the DESIGN.md guide

We've launched a curated library of 13 shadcn/ui themes you can browse, preview, and install with one CLI command. Every theme uses official CSS variables—so the same palette applies across our blocks, components, and pages in light and dark mode.

What's included

• 11 free themes — Shadcnblocks, Vercel, Supabase, Linear, Claude, Claymorphism, Amber Minimal, Cleanslate, Citrus, Falcon, and Modern Minimal
• 2 Pro themes — Alpine and Stripe
• Light & dark mode tokens, display/body fonts, and one-line CLI install
• Compatible with Tweakcn, StyleGlide, Tinte, and any editor that exports standard shadcn CSS variables

Browse the themes

• Shadcnblocks
• Vercel
• Supabase
• Linear
• Claude
• Claymorphism
• Amber Minimal
• Cleanslate
• Citrus
• Falcon
• Alpine (Pro)
• Modern Minimal
• Stripe (Pro)

Themes Overview | Read the announcement

Added 73 new blocks

A professional small business and services template built on shadcn/ui and Tailwind. Available in both Next.js and Astro editions, ideal for professional service businesses.

Verdict product page

Shadcn Admin Kit v2.2.0 adds two major app sections — Project Management and Todo — integrated into the shared admin shell with sidebar navigation, mock data, and mobile polish throughout.

Project Management App

Adds a full Project Management section under /project-management/*, integrated into the admin sidebar and app shell.

Dashboards (4 variants)

• Dashboard 1 — Command-center workspace with profile rail, work-hour analysis chart, issues table, time tracker, events/focus sections
• Dashboard 2 — Portfolio-style overview with issue map and theme-driven charts
• Dashboard 3 — Project tracking and status visualization
• Dashboard 4 — Dependency dashboard with delivery-flow metrics and insights

Projects

• Project List 1–4 — Card, table, sidebar, and filtered list layouts with sticky section headers and dark-mode polish
• Project Detail 1–2 — Rich detail screens with:
  • Tabbed layout (overview, activity, embedded issue views)
  • Side rail (notes, files, milestones, schedule)
  • Interactive dependency canvas
  • Delivery flow panel
  • Mobile-optimized header and meta panels

Teams & Members

• Team List 1–3 — Team directory with task-card and card-grid variants
• Member List 1–3 — Table view, card grid, and invite-panel screens

Issues — multiple view types

Inbox

• Inbox 1–4 — Support inbox shell, ticket conversations, issue preview/composer, full-width layout
• Inbox Email 1 — Opened email reading view with navigation back to inbox

Shared infrastructure

• Large mock-data layer (project-details, projects, clients, etc.)
• Reusable PM components (gantt, kanban, calendar, issue core, meta/property grids)
• Theme controls for PM-specific styling
• Mobile responsiveness pass across dashboards, lists, gantt, calendar, kanban, inbox, and detail screens
• Sidebar nav group: Project Management with all routes linked

Todo App

Integrates the shadcn-todo-app as a first-class admin app at /todo/*, inside the shared admin layout (sidebar + header).

Core task management

• All Tasks (/todo) — Main inbox with add/edit/complete/delete
• Smart lists — Today, Upcoming, Important
• Projects — Per-project task views (/todo/projects/[id])
• Create Task — Dedicated full-page create flow (/tasks/new)
• Task Detail — Full page (/task/[id]) plus intercepting modal (@modal/(.)task/[id]) for in-context editing

View modes

• List — Sortable, filterable task list with manual reorder (drag-and-drop)
• Kanban — Board view by status
• Calendar — Due-date calendar view

Task features

• Priorities, labels, starred/important flag
• Due dates and reminders
• Subtasks and comments
• Sort options: manual, due date, priority, title, created date
• Filters: project, priority, label, starred-only
• In-memory state via Zustand store (mock data, no backend)

Additional pages

• Activity — Task activity log
• Notifications — Notification center UI
• Trash — Deleted tasks (/deleted)
• Settings — Tabbed settings (Account, General, Subscription, Themes, Integrations, Apps)

UX & integration polish

• Moved todo app inside the admin app shell (shared sidebar/header)
• Centralized routing via src/lib/todo-routes.ts (todoRoutes helper)
• Display preferences — Font size, density, text/display font choices
• Search dialog in todo nav
• Friendly not-found page for invalid in-memory task links
• Todo-specific calendar colocated under the route group
• Sidebar nav group: Todo with tasks, projects, and manage links

At a glance

Admin Kit overview

Added 113 new blocks

A premium developer tools SaaS template with a signature intro animation, Motion/GSAP interactions, and Fumadocs-powered MDX docs with ⌘K search. Available in both Next.js and Astro editions.

Tech stack:

• Next.js 16 or Astro 6
• shadcn/ui & Tailwind CSS 4
• Motion & GSAP
• Fumadocs MDX docs

Meridian product page

Browse and install shadcn/ui blocks directly from your IDE with the new Shadcn IDE Extension. Search, preview, and install 1300+ blocks without leaving your editor.

What you can do

• Browse blocks in your IDE — Search and preview all 1300+ blocks directly inside VS Code, Cursor, and more.
• One-click install — Install any block into your project without leaving your editor.
• Works with your workflow — Uses the same shadcn/ui CLI under the hood, so blocks land in your codebase ready to use.

You can now compose full pages from Shadcnblocks right inside the site using The new Shadcn UI Page Builder. The Shadcn Page Builder lives in the Explorer alongside blocks and components, so you can browse library pages, open the builder, and arrange sections without leaving the workflow.

What you can do

• Browse pre-built pages — Explore pre-built pages the same way you explore blocks and components.
• Open the builder — Start from Shadcn Page Builder to create or edit a page layout: add blocks, reorder sections, and tune structure in a dedicated editor.
• Install with the Shadcn CLI — Pull page layouts into your project using the same shadcn/ui CLI workflow you use for blocks and components, so pages land in your codebase ready to extend.

We now ship 49+ pre-built pages — complete layouts assembled from the same shadcn/ui blocks you already use. Browse them on Pages, then copy the code or install a page with the shadcn CLI.

Layouts include landing, pricing, about, product, blog, contact, FAQ, changelog, and integrations. Each page is theme-ready for light and dark, and licensed for client and SaaS work.

What you can do

• Browse by type — Open Pages and filter landing, pricing, about, and the rest of the catalog.
• Preview a full layout — Open any page to see the assembled sections before you install it.
• Install with the CLI — Pull a page into your project the same way you install a block or component.

Browse Pages

Added 87 new blocks

Kinto product page

Shadcn Admin Kit v2.0.0 is a platform rewrite: Next.js 16, a refreshed shadcn / Radix stack, and a full ecommerce admin with route groups, shared chrome, and dozens of production-ready pages.

Platform and dependencies

• Next.js 16 and refreshed shadcn / Radix / Sonner stack
• Zod / resolvers updated for v4-compatible schemas
• Recharts v3 and react-day-picker v9 alignment, chart/calendar fixes and sizing
• Shadcn foundation refresh, latest components, components.json updated to radix-vega

Ecommerce

Dashboards

Multiple dashboard variants (1–4, 6–8, 11–12) with updated menu labeling.

Products

Product list UIs, detail pages, add product, multistep wizard, guided edit, variants, and sheets — plus mobile, filter, card, and mini-chart polish.

Orders

• Order list and order detail (map, journey, activity, mobile header)
• Sales order list/detail, payment sheet, draggable order board
• Status track and filters

Customers & shipments

Lists and detail pages, activity/tabs, and shipping-related flows.

Purchase orders & shipping labels

• Purchase order creation flow and stepped product selection
• Shipping label create/edit split and forms

Routing & UX

Routes aligned with the sidebar, theme toggle on ecommerce pages, list → detail links, split scrolling, plus mobile and a11y fixes.

App structure and v2 refactor

• Route groups and group-level layouts; legacy demos under an original group
• Site config, unified breadcrumbs, homepage redirect, global header for older pages
• (dashboard) → (admin) rename
• Shared header / subheader, scoped headers, command-style group search (cmdk)
• Developers and original areas aligned to a consistent layout pattern

Search, theme, and UI polish

• Header / search updates (including mobile: search as icon)
• Theme selector; theme preset hydration fix; chart indicator theming
• Dashboard chart interactions and tooltip behavior (block tooltips vs shared defaults)

Admin Kit overview

Added 64 new blocks

Hatch product page

All ouf our premium Shadcn UI Astro templates have been upgraded to Astro 6.

This is a major refresh for anyone building with our Astro templates. We have upgraded the full Astro template lineup to Astro 6 so you start from the current framework generation—better defaults, a cleaner upgrade path, and access to the latest Astro ecosystem improvements out of the box.

Deployment: tested on three major platforms

Shipping to production should not be guesswork. We have added and verified deployment guidance and configuration for three of the most common hosts for static and server-rendered Astro apps:

• Vercel — fast global delivery and straightforward Git-based deploys
• Netlify — mature build pipelines and edge-friendly hosting
• Cloudflare Pages — strong performance at the edge with a simple Pages workflow

Browse the full catalog and grab the Astro versions of any template you need on our Templates page.

Shadcn Figma Kit v2.0 Released 🔥

• Light/dark mode support via Figma variables
• Theme system with Shadcn, Tweakcn, and custom theme support
• Two-layer variable architecture for independent theme and mode switching
• Typography system mapped to Tailwind text classes
• Lucide icons with instance swapping
• All shadcn/ui components rebuilt from the ground up
• 500+ pro blocks with responsive variants (Desktop, Tablet, Mobile)
• All blocks published in Assets panel and instance swappable
• Token names match actual Shadcn CSS variables

Shadcn Figma Kit Product Page · Documentation

Added 26 new blocks

Echo product page

We're excited to announce Base UI support for all Shadcnblocks components. You can now choose between Radix UI and Base UI as the underlying primitive library for your shadcn/ui components.

Why Base UI?

Base UI is a headless component library from the MUI team. It offers:

• Smaller bundle sizes compared to Radix UI
• Zero styling overhead
• Active development and regular updates

How to Use

1. Open the Explorer
2. Select Base UI in the sidebar's UI Library dropdown
3. Preview blocks with Base UI primitives
4. Download a pre-configured components.json
5. Install blocks with the CLI—they'll use Base UI automatically

Configuration

Your components.json now supports library-style combinations:

{
  "style": "base-vega"
}

Available options: base-vega, base-nova, base-maia, base-lyra, base-mira

All 5 component styles work with both Radix UI and Base UI.

Base UI Documentation | Explorer

Introducing component styles for shadcn/ui—the same styles available in the Shadcn UI Create page. This gives you control over the visual appearance of every component in your project.

Available Styles

• Vega (New York) — The classic shadcn/ui look. Clean, neutral, and familiar.
• Nova — Reduced padding and margins for compact layouts.
• Maia — Soft and rounded, with generous spacing.
• Lyra — Boxy and sharp. Pairs well with mono fonts.
• Mira — Compact. Made for dense interfaces.

Preview in the Explorer

The Explorer now includes a Component Style selector in the sidebar. Switch between styles instantly to see how any block looks with different visual treatments.

How It Works

Styles are configured in your components.json:

{
  "style": "radix-maia"
}

The format is {library}-{style}, combining your UI library choice (Radix or Base) with your visual style preference.

All Combinations

• radix-vega, radix-nova, radix-maia, radix-lyra, radix-mira
• base-vega, base-nova, base-maia, base-lyra, base-mira

When you install blocks via the CLI, they automatically use your configured style.

Component Styles Documentation | Explorer

The Explorer has received a major upgrade with new features and significant performance improvements.

New Sidebar Options

• Component Style Selector — Preview blocks in all 5 styles (Vega, Nova, Maia, Lyra, Mira)
• UI Library Selector — Switch between Radix UI and Base UI
• Improved Theme Picker — Faster theme switching with better previews
• Full-width Dropdowns — Cleaner, more accessible interface

Configuration Export

• Smart components.json — Downloads now include your selected style and UI library
• Docs Link — Quick access to installation documentation from the toolbar
• Improved CLI Display — Full command visible on larger screens

Performance Improvements

• Faster initial page load with optimized API calls
• Smoother scrolling in the block grid with virtualization
• Reduced re-renders when changing preview options
• Better memory management for large block libraries

Updated Paywall Experience

• Clearer messaging about what's included with Pro access
• Detailed feature checklist showing all benefits
• Consistent "Get All Access" call-to-action

Quality of Life

• Bug report button with improved accessibility
• Fixed scrollbar shift when opening dropdowns
• Better mobile responsiveness in the sidebar

Explorer | Explorer Guide