20 Best shadcn/ui Projects and Examples to Learn From (2026)

Real shadcn/ui projects worth studying in 2026 — production open source apps, component libraries, SaaS starters, block libraries, and dashboards. Verified, current, and re-checked for July 2026.

AshFull-stack developer and the maker behind ShadcnDeck. Writes practical guides on React, Next.js, Tailwind, and shadcn/ui — the things he wishes existed when he started.
Published May 20, 2026
Updated Aug 30, 2026
15 min read
shadcn/uiReactNext.jsProjectsTemplatesOpen SourceTailwind CSSTypeScriptSaaSFrontend Development
20 Best shadcn/ui Projects and Examples to Learn From (2026)

Building with shadcn/ui is one thing. Knowing what's possible with it is another.

The ecosystem has grown well past individual components. Real production apps, SaaS starters with auth and billing, open source tools with tens of thousands of stars, block libraries with over a thousand pre-built sections, all of it built on shadcn/ui. The variety makes it hard to know where to look first.

Below are 20 shadcn/ui projects worth studying, broken into real apps, SaaS starter kits, block libraries, and templates. We re-checked every entry for this 2026 update: some projects from earlier lists have been archived or superseded, so we dropped or reframed them and added newer apps that better reflect how the library is used today. Each pick shows a different dimension of what shadcn/ui can do at scale.

Real Apps Built with shadcn/ui

These are production applications and shadcn/ui-based systems you can explore, fork, or build on. Seeing shadcn/ui inside a real codebase, or a system built directly on top of it, teaches you patterns that documentation doesn't.

1. Cal.com: Open Source Scheduling at Scale

Cal.com open source scheduling app built with shadcn/ui - screenshot

Cal.com is the open source alternative to Calendly, with 45,000+ GitHub stars and one of the largest shadcn/ui codebases in production. The UI layer spans booking pages, availability settings, team dashboards, and integrations, all maintained by a full-time team, so the patterns are genuinely production-grade.

For anyone building complex scheduling, multi-step form flows, or large team-based dashboards, Cal.com shows how shadcn/ui holds up at enterprise scale. It's still actively maintained in 2026 and remains the reference most people reach for when they want to see shadcn/ui in a serious, long-lived product.

  • Stack: Next.js, shadcn/ui, Tailwind CSS, tRPC, Prisma
  • Best for: Complex multi-step UI patterns, enterprise-scale shadcn/ui usage

2. Midday: Polished Open Source Finance App

Midday open source finance and invoicing app built with shadcn/ui - screenshot

Midday is an all-in-one business tool for freelancers and solo founders, covering invoicing, time tracking, file reconciliation, storage, and an AI assistant. It's open source (around 14,000 GitHub stars), and its founders openly credit shadcn/ui for the interface. If you want to see what a genuinely beautiful, modern shadcn/ui product looks like, this is one of the best examples in the wild.

The codebase is a strong study in product UI: dense financial dashboards, data-heavy tables, command menus, and a consistent design language across a real SaaS. Note the licensing, though — Midday is AGPL-3.0 for non-commercial use, and commercial deployments require a separate license. It's a learning resource and reference first, not a drop-in starter.

  • Stack: Next.js, shadcn/ui, Tailwind CSS, Supabase
  • License: AGPL-3.0 (commercial license required for commercial use)
  • Best for: Studying polished, data-dense product UI built on shadcn/ui

3. Cap: Open Source Loom Alternative

Cap open source screen recorder built with shadcn/ui and Tauri - screenshot

Cap is an open source screen recorder (a Loom alternative) with roughly 20,000 GitHub stars. You record your screen or webcam, edit with backgrounds and effects, then share via link. It's built on Rust and Tauri for native desktop performance, with shadcn/ui powering the interface.

Cap is worth studying because it shows shadcn/ui outside the usual Next.js-on-the-web context, inside a desktop app and its companion web dashboard. If you're building anything cross-platform or media-heavy, it's a clean example of the same component system spanning both surfaces.

  • Stack: Tauri, Rust, Next.js, shadcn/ui, Tailwind CSS
  • Best for: Cross-platform (desktop + web) apps, media tooling UI

4. UI Able: From Components to Complete Interfaces

UI Able structured shadcn-based UI system for building complete interfaces - screenshot

UI Able is a structured, shadcn-based UI system built to take you from individual components to complete interfaces. Instead of loose, one-off snippets, it organizes everything into a consistent system, so you can assemble scalable, production-ready screens faster on the same React, Next.js, and Tailwind CSS stack you already use with shadcn/ui.

The focus here is completeness. Rather than stopping at buttons and inputs, UI Able covers the larger, assembled patterns real applications need, all kept visually consistent with the shadcn/ui look. If you like shadcn/ui but want more of the interface pre-built for you, it's a practical place to start and a good example of how far the shadcn approach can be systemized.

  • Stack: React, Next.js, shadcn/ui, Tailwind CSS
  • Best for: Building complete, production-ready interfaces on the shadcn/ui foundation

5. ReUI: Agent-Ready Components and Blocks

ReUI design-forward shadcn/ui component and block library with MCP support - screenshot

ReUI is a design-forward platform built on shadcn/ui, with a strong focus on AI coding agents. The free tier is generous: over 1,000 shadcn/ui components organized by category, 560+ hand-crafted animated icons, and a free MCP server plus agent skills that teach assistants like Claude, Cursor, and v0 how to build with ReUI directly.

The paid ReUI Pro tier (a one-time $249) adds 485+ production-ready blocks across 50 categories, application templates, e-commerce sections, and advanced data-grid components. The pitch is handcrafted, production-tested patterns instead of generic AI output, which makes it a useful pick if you build with AI agents but want the UI layer to come from real, curated components.

  • Stack: React, TypeScript, shadcn/ui, Tailwind CSS
  • Pricing: Freemium. Large free tier, ReUI Pro is a one-time $249
  • Best for: AI-assisted building with production-grade components and blocks

6. soundcn: Copy-Paste UI Sound Effects

soundcn curated UI sound effects installable with the shadcn CLI - screenshot

soundcn brings the shadcn workflow to something most component libraries ignore: sound. It's a curated, open-source collection of over 800 UI sound effects (largely CC0-licensed, sourced from Kenney) that you install the same way you add a component, with a single shadcn CLI command.

bash

The sounds are organized by use case, UI feedback, game effects, alerts, and more, so you can add clicks, confirmations, and notifications without hunting through generic audio libraries or worrying about licensing. For anyone building playful web apps, games, or interfaces that could use a bit of audio feedback, it's a genuinely different take on what "install with shadcn" can mean.

  • Stack: shadcn CLI registry, React, Tailwind CSS
  • License: Mostly CC0, free to use
  • Best for: Adding UI sound effects and audio feedback the shadcn way

7. dialectcn: Ready-to-Paste shadcn Presets

dialectcn living catalog of shadcn theme presets ready to copy and paste - screenshot

dialectcn is a living catalog of shadcn presets, ready to copy and paste. Instead of shipping components, it focuses on the theme layer: color palettes and typography you can drop into any shadcn/ui project. Presets come in three flavors, brand-inspired looks that echo recognizable companies, community-submitted themes you can like and filter, and randomly generated combinations for when you want a fresh starting point.

The workflow is simple: browse the feed, pick a preset, copy the code, and ship the UI. It pairs well with a component library like the ones above, because it solves a different problem, giving your shadcn/ui build a distinct visual identity without hand-tuning every token. For a deeper dive into theming, our own shadcn theme generator covers the same ground with live previews.

  • Stack: shadcn/ui, Tailwind CSS, React
  • Pricing: Free
  • Best for: Quickly giving a shadcn/ui project a distinct theme and visual identity
Launch your SaaS faster with a modern Shadcn UI template - Explore Free Templates

8. Dub.co: Open Source Link Management

Dub.co open source link management platform built on shadcn/ui - screenshot

Dub.co is a well-known open source link management and analytics platform with custom domains, team workspaces, and a full affiliate/partner system underneath. It started on shadcn/ui primitives and remains a practical example of a multi-tenant SaaS built on the same Radix UI + Tailwind foundation.

One honest caveat for 2026: Dub has grown well beyond off-the-shelf shadcn/ui. Recent code scans found its internal UI package contains hundreds of components, effectively a full in-house design system layered on top of the shadcn foundation. That makes it a great study in how a product evolves its own system from shadcn roots, but it's no longer a "vanilla shadcn/ui" reference. Read it for architecture and scale, not for stock component usage.

  • Stack: Next.js, shadcn/ui foundation + in-house design system, Tailwind CSS, Prisma
  • Best for: Seeing how a production SaaS scales a design system from shadcn/ui roots

9. OpenStatus: Monitoring and Advanced Data Tables

OpenStatus open source monitoring and status page platform with shadcn/ui - screenshot

OpenStatus is an open source synthetic monitoring and status-page platform built with shadcn/ui. Beyond the product itself, the team's data-table work is one of the most-referenced patterns in the ecosystem: an infinite-scroll table with Notion-style faceted filters and URL-based filter state, so any filtered view is a shareable link.

If your project needs serious tables, log viewers, audit trails, observability dashboards, OpenStatus is the production example to study. It pairs shadcn/ui with TanStack Table, nuqs, and cmdk to handle the most demanding component most admin products eventually need.

  • Stack: Next.js, shadcn/ui, TanStack Table, nuqs, cmdk
  • Best for: Advanced data tables, observability dashboards, URL-shareable filter state

10. Taxonomy: The Historical Reference

Taxonomy shadcn/ui reference app by the creator of shadcn - screenshot

Taxonomy was the first real-world shadcn/ui app most developers studied, built by the creator of shadcn/ui himself to explore the Next.js 13 App Router, server components, authentication, subscriptions, and an MDX docs site. With 19,000+ stars, it shaped the patterns the entire ecosystem now follows.

Important for 2026: Taxonomy is no longer maintained. Its README states it no longer receives updates, does not reflect current best practices, and is not recommended for production. It's still worth a read as the historical origin of shadcn/ui conventions, but don't copy its code as-is. For current starting points, use the official Templates directory or the maintained starters below.

  • Stack: Next.js 13, shadcn/ui, NextAuth.js, Prisma, Stripe, Contentlayer
  • Status: Archived, study for history and patterns, not for production

SaaS Starter Kits

These bundle shadcn/ui with authentication, billing, and database setup, giving you a production-ready foundation for a SaaS product without the boilerplate.

11. Create v1: Midday's Free Open Source Starter

Create v1 free open source SaaS starter from the Midday team built with shadcn/ui - screenshot

Create v1 is a free, open source production starter from the team behind Midday. It distills the architecture they use in a real product into a clean monorepo: Next.js, Turborepo, Supabase for auth and database, and Tailwind CSS with shadcn/ui for the interface, plus pre-wired email, analytics, and i18n.

Because it comes from a team shipping a polished commercial app, the patterns are battle-tested rather than theoretical. It's the strongest free starting point on this list if you want to skip weeks of initial setup without paying for a kit. For lighter, landing-page-first starting points, the free shadcn templates on shadcndeck cover SaaS pages on the same stack.

  • Stack: Next.js, Turborepo, shadcn/ui, Supabase
  • Pricing: Free, open source
  • Best for: Founders who want a production-grade monorepo foundation at no cost

12. MakerKit: Full-Featured SaaS Starter

MakerKit paid SaaS starter kit with shadcn/ui Supabase and Stripe - screenshot

MakerKit is a paid, full-featured SaaS starter kit built with Next.js, shadcn/ui, and Supabase. Authentication, subscription management, team accounts, dashboards, and forms come pre-built, with the UI layer built entirely on shadcn/ui so the design system is consistent out of the box.

What separates MakerKit from simpler starters is the production-readiness of its auth and billing flows. Instead of wiring together Stripe, Supabase Auth, and your UI from scratch, you get a cohesive setup that developers report shipping in days instead of weeks.

Just need the sign-in screen without the full starter kit? Our shadcn login page templates guide has 5 free, copy-paste variants.

  • Stack: Next.js, shadcn/ui, Supabase, Stripe
  • Pricing: Paid
  • Best for: Founders who want auth and billing pre-wired and are happy to pay for it

Block and Component Libraries

These build on top of shadcn/ui to ship pre-composed page sections and extended components: hero areas, pricing tables, testimonials, dashboards, and animated effects, ready to copy and customize. They aren't "apps," but they're where most teams actually save time. The two below are the highest-signal picks — for the full field, see our best shadcn component libraries roundup.

13. Shadcnblocks: 1,700+ Production-Ready Blocks

Shadcnblocks 1700+ shadcn/ui block library for marketing pages and dashboards - screenshot

Shadcnblocks is the largest curated block library in the shadcn/ui ecosystem. As of 2026 it ships roughly 1,700 blocks plus over 1,000 component variants and a set of premium templates, covering marketing pages, dashboard shells, e-commerce sections, and SaaS layouts, all installable via the shadcn CLI registry.

The scale is the differentiator, but it has also kept pace with the platform: it supports both Radix UI and Base UI, works with the new preset/theme-token system, integrates with the shadcn MCP server, and shipped a V2 Figma kit in March 2026 that mirrors every block. If you need breadth without giving up quality, it's the practical default.

bash
  • Stack: Next.js, React, shadcn/ui, Tailwind CSS (also Astro, Vue, Svelte)
  • Pricing: Freemium. Core blocks free, full catalog and Figma source paid
  • Best for: Teams that need breadth: marketing pages and dashboard UI in one place

14. Origin UI: SaaS-Focused Components

Origin UI SaaS-focused component library built on shadcn/ui - screenshot

Origin UI focuses on SaaS-specific components rather than general marketing blocks: dashboards, onboarding flows, billing pages, settings pages, and data tables. The components are built for the screens that SaaS products actually need, not just landing pages.

The design stays consistent with shadcn/ui's visual language, and the components extend naturally from the shadcn/ui base. For developers who want full shadcn/ui-based landing page templates rather than individual components, shadcndeck templates cover complete SaaS page layouts on the same stack.

  • Stack: React, shadcn/ui, Tailwind CSS
  • Pricing: Free, open source
  • Best for: SaaS dashboards, onboarding flows, and product-specific UI patterns

15. Magic UI: Components for Marketing Pages

Magic UI animated component library for shadcn/ui marketing pages - screenshot

Magic UI ships 150+ animated components and effects, including marquees, globes, dock bars, and beam patterns, designed for modern marketing pages. It installs through the shadcn CLI registry, so the workflow matches core shadcn/ui components.

The focus is narrower than Shadcnblocks but deeper on the effects layer. If you're building a landing page and need visual elements that go beyond shadcn/ui's defaults without writing custom animations, Magic UI covers the gap efficiently.

  • Stack: React, shadcn/ui, Tailwind CSS, Motion
  • Pricing: Freemium. Core components free, Pro tier paid
  • Best for: Marketing pages and landing pages that need polished visual effects
Want more? Magic UI also has a Pro version with premium templates and additional components for teams that want to move faster.

16. Aceternity UI: Animated Components

Aceternity UI animated components extending shadcn/ui for landing pages - screenshot

Aceternity UI extends the shadcn/ui ecosystem with animated, interactive components: bento grids, spotlight effects, parallax cards, and animated backgrounds. These aren't in the core library, which keeps the base intentionally minimal.

The components blend shadcn/ui's clean aesthetic with Motion animations. For founders building marketing pages that need more visual personality than the default shadcn/ui style, Aceternity covers the gap without a separate design system.

  • Stack: React, shadcn/ui, Tailwind CSS, Motion
  • Pricing: Freemium
  • Best for: Marketing pages, landing pages, product showcases that need animation

17. 21st.dev: Community Component Marketplace

21st.dev community marketplace for shadcn/ui components - screenshot

21st.dev is a fast-moving, community-driven marketplace for shadcn-compatible components and blocks, sometimes described as "npm for design engineers." Developers publish their own shadcn/ui components, and everything installs through the shadcn CLI and works with the shadcn MCP server for AI-assisted workflows.

It's a different category from the curated libraries above: wider variety, faster moving, and built with AI agents in mind. If you want to browse a huge range of real-world shadcn/ui components, or publish your own, this is the most active community hub in 2026, and a more current home for inspiration than older galleries that have gone quiet.

  • Stack: React, shadcn/ui, Tailwind CSS
  • Pricing: Free community tier plus paid registry tiers
  • Best for: Browsing community components, publishing your own, AI-assisted building
Launch your SaaS faster with a modern Shadcn UI template - Explore Free Templates

Templates, Dashboards, and Tools

18. shadcn-admin: Open Source Admin Dashboard

shadcn-admin open source admin dashboard template built with shadcn/ui and Vite - screenshot

shadcn-admin by satnaing is the most widely referenced open source admin dashboard built with shadcn/ui, with 11,000+ stars and active maintenance. It includes 10+ pages, a collapsible sidebar, a global command palette (Cmd+K), light and dark modes, RTL support, and partial Clerk auth, with clean, modular code throughout.

Notably, it's built on Vite, React 19, and TanStack Router rather than Next.js, so it's a great pick if you want a fast SPA-style admin without server components, and a reference if you're betting on the TanStack ecosystem. For internal tools, analytics dashboards, or admin panels, it's a cleaner starting point than the full-stack SaaS kits because you get the UI layer without auth and billing overhead.

  • Stack: Vite, React 19, shadcn/ui, Tailwind CSS, TanStack Router
  • Pricing: Free, MIT licensed
  • Best for: Internal tools, admin panels, analytics dashboards

19. Shadcn Form Builder: Interactive Open Source Tool

The Shadcn Form Builder by Hasan Harman (source on GitHub) is the most popular open source form builder in the ecosystem. It's a drag-and-drop tool where you assemble forms in the browser, configure validation with Zod, and export clean, copy-paste-ready shadcn/ui code.

It's valuable as a learning resource because it shows shadcn/ui handling state, drag-and-drop logic, and interactive composition, not just static layouts. If you want to build that reordering yourself rather than read it, the sortable list and kanban patterns cover the same dnd-kit hooks this project uses. For deeper component-level references, shadcn accordion, shadcn tabs, and shadcn select cover the form-adjacent components in detail.

  • Stack: Next.js, React, shadcn/ui, Tailwind CSS, Zod
  • Pricing: Free, MIT licensed
  • Best for: Learning advanced shadcn/ui composition and interactive UI patterns

20. shadcn/ds: Components for Building Design Tools

shadcn/ds components for building canvas-based design tools with shadcn/ui - screenshot

shadcn/ds is one of shadcn's newer projects: a set of components specifically for building design tools, the kind of canvas-and-panels interfaces you see in Framer, Canva, and similar editors. It's a different problem space from marketing pages and dashboards, and a sign of where the ecosystem is heading.

It's worth knowing about even if you never build a design tool, because it shows how far the shadcn approach, open code you own and adapt, stretches beyond standard CRUD apps. If you're building anything with a canvas, layers, draggable panels, or property inspectors, start here rather than reinventing the primitives.

  • Stack: React, shadcn/ui patterns, Tailwind CSS
  • Pricing: Open source
  • Best for: Canvas-based editors, design tools, and other non-CRUD interfaces

How to Use This List

Learning from real apps: Start with Cal.com and Midday. Both are actively maintained, polished products that show shadcn/ui at production scale. Cap adds a cross-platform (desktop + web) angle, and OpenStatus is the one to study for advanced data tables.

Building a SaaS: Create v1 if you want a free, production-grade monorepo foundation, or MakerKit if you'd rather pay for pre-wired auth and billing. For landing pages specifically, shadcndeck templates cover SaaS UI patterns built on shadcn/ui without the full-stack overhead.

Need components and page sections fast: UI Able for a complete shadcn-based interface system, ReUI for agent-ready components and blocks, Shadcnblocks for breadth, Origin UI for SaaS-specific components, Magic UI or Aceternity UI for animated marketing pages, and 21st.dev for community variety. For sound, soundcn adds copy-paste UI audio, and dialectcn gives you ready-to-paste theme presets.

Building a dashboard, tool, or internal app: shadcn-admin as a starting point, the Shadcn Form Builder for interactive form patterns, and shadcn/ds if you're building a canvas-based design tool.

🚨 Ecosystem update (2026): shadcn/ui has shifted well beyond components. CLI v4 (March 2026) added project-state management, design-system --presets, and shadcn/skills for AI agents; the visual npx shadcn create builder scaffolds full projects with your theme decided up front. The library now supports both Radix UI and Base UI, ships an MCP server, and added an ejectpath. Run npx shadcn@latest init with Next.js, Vite, TanStack Start, React Router, Astro, or Laravel.

More shadcn/ui resources on shadcndeck:

A
Ash

Full-stack developer and the maker behind ShadcnDeck. Writes practical guides on React, Next.js, Tailwind, and shadcn/ui — the things he wishes existed when he started.

Related Articles