Infrastructure
shadcn/ui
Copy-paste React component collection built on Radix Primitives and Tailwind. You own the source, customize freely, no library to upgrade.
Try shadcn/uiui.shadcn.com
Share
Save
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 Radix Primitives 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.
Similar Tools
Infrastructure
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 Radix 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.
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
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 they work, and how to build your own in 5 minutes.
AI AgentsGuide
Building Your First MCP Server
Step-by-step guide to building an MCP server in TypeScript - from project setup to tool definitions, resource handling, testing, and deployment.
AI AgentsRelated Posts
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 generates a full design system from your repo, ships one-shot pricing pages, and exports clean HTML/CSS to...
8 min read
Magic Patterns
Magic Patterns: Why Design Wins in a World of AI Code Generators
Every AI-generated site looks the same. The gradients.
6 min read
Magic Patterns
Magic Patterns: Effortless UI Design with AI
Most AI design tools try to replace your entire stack. Magic Patterns takes a different approach.
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