Infrastructure
shadcn/ui
Copy-paste React component collection built on Base UI (the default), Radix, or React Aria primitives and Tailwind. You own the source, customize freely, no library to upgrade.
Try shadcn/uiVisit ui.shadcn.comui.shadcn.com
Share
shadcn/ui is not a component library you install. It is a CLI that copies accessible, well-styled React components into your codebase. Components are built on Base UI (the default for new projects since July 2026), Radix, or React Aria for behavior and Tailwind for styling. Because the source lives in your repo, you can change anything. shadcn became the default component layer for Next.js apps in 2024-2025 and now ships first-class registry support so teams can publish their own component sets. The trade-off versus a packaged library is that you maintain the components.
shadcn/ui at a glance
Last verified
- Pricing
- Free and open source (MIT)
- Install
npx shadcn@latest initnpx shadcn@latest add buttonnpx shadcn@latest init -t next- Models
- Not an AI tool. The CLI copies components into your project built on Base UI (the default for new projects since July 2026), Radix, or React Aria, styled with Tailwind CSS, with templates for Next.js, Vite, TanStack Start, React Router, Astro, and Laravel. The AI Elements patterns render AI SDK message parts, and the registry exposes an MCP server for coding agents.
- Recent changes
- Adds Trace and Code Block components and AI Elements, 21 copy-in patterns for agentic interfaces. AI Elements replaces AI SDK Elements, which will be deprecated.
- Every component now imports cn from the new cn package instead of a local clsx plus tailwind-merge helper; npx shadcn migrate cn moves existing projects over.
- GitHub registries now work with private repositories, either through the GitHub CLI's stored credentials or a GH_TOKEN or GITHUB_TOKEN in CI.
Sources: shadcn/ui changelog, Changelog RSS (entry dates), Base UI as the Default (July 2026), Next.js installation, CLI docs, GitHub repository
Similar Tools
Infrastructure
R
Radix UI
Unstyled, accessible React primitives. Dialogs, popovers, dropdowns, and more, with full keyboard and screen-reader support out of the box.
AI Coding
v0
Vercel's generative UI tool. Describe a component, get production-ready React code with shadcn/ui and Tailwind. Iterate by chatting. Free to try.
Infrastructure
Clerk
Drop-in auth for React/Next.js. Pre-built sign-in UI, session management, user profiles, org management. This site uses Clerk for authentication.
Infrastructure
Next.js
The React meta-framework. App Router, Server Components, Server Actions, file-based routing, and first-class deployment on Vercel.
Get started with shadcn/ui
Copy-paste React component collection built on Base UI (the default), Radix, or React Aria primitives and Tailwind. You own the source, customize freely, no library to upgrade.
Try shadcn/uiGet weekly tool reviews
Honest takes on AI dev tools, frameworks, and infrastructure - delivered to your inbox.
Subscribe FreeMore Infrastructure Tools
Vercel
Deployment platform behind Next.js. Git push to deploy. Edge functions, image optimization, analytics. Free tier is generous.
C
Coolify
Self-hosted PaaS for deploying apps, databases, and services. Git-based deploys, Docker support, preview environments, and a clean UI.
Convex
Reactive backend - database, server functions, real-time sync, cron jobs, file storage. All TypeScript. This site's backend (courses, videos, user data) runs on Convex.
Related Guides
Guide
Getting Started with DevDigest CLI
Install the dd CLI and scaffold your first AI-powered app in under a minute: Next.js 16, Convex, Clerk, Autumn, Tailwind v4 and an agent-ready CLAUDE.md.
Getting StartedGuide
Claude Code Setup Guide
Configure Claude Code for maximum productivity -- CLAUDE.md, sub-agents, MCP servers, and autonomous workflows.
AI AgentsGuide
MCP Servers Explained
What MCP servers are, how AI clients like Claude Code call their tools, how to add one through .mcp.json, and how to build your own in TypeScript.
AI AgentsRelated Posts
7 min read
News
Next.js 16.3 Is Out: Instant Navigations, 90% Less Dev Memory, and Versioned Docs for AI Agents
Next.js 16.3 adds opt-in Instant Navigations with partial prefetching, up to 90% less dev-server RAM, faster cached buil...
7 min read
News
Octane: Inferno's Successor Compiles React's Programming Model Ahead of Time
Octane is an MIT-licensed framework from Inferno's creator that compiles React-style hooks and Suspense to direct DOM co...
6 min read
News
If You're a Button, You Have One Job: The Case for Responsive UI
A simple image rotation button reveals deep truths about responsive interface design - why buttons must always respond p...
9 min read
Claude
Claude Design: Anthropic's Bet That Designers and Developers Want the Same Tool
Claude Design reads your repo to build a design system, generates layouts like pricing pages, and exports HTML/CSS to yo...
8 min read
Magic Patterns
Magic Patterns: Why Design Wins in a World of AI Code Generators
Every AI-generated site looks the same. Magic Patterns bets on design instead: Chrome extension capture, an infinite can...
6 min read
Magic Patterns
Magic Patterns: Effortless UI Design with AI
Most AI design tools try to replace your stack. Magic Patterns turns prompts into UI prototypes on an infinite canvas, w...
Try the member tools free
Get Smarter About AI Dev
New tutorials, open-source projects, and deep dives on coding agents - delivered weekly.
One email per weekReal code, not theoryFree forever