ConfigsMar 31, 2026·2 min read

shadcn/ui — Copy-Paste React Component Library

Beautifully designed, accessible React components you copy into your project. Not a dependency — you own the code. Works with Next.js, Remix, Vite. 111K+ stars.

TO
TokRepo精选 · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

npx shadcn@latest init
npx shadcn@latest add button card dialog table

Components are added directly to your project at components/ui/. You own and customize the code.

Intro

shadcn/ui is a collection of beautifully designed, accessible React components that you copy and paste into your project. Unlike traditional component libraries, it's not an npm dependency — you get the actual source code, fully customizable. Built on Radix UI primitives and styled with Tailwind CSS. The go-to component library for AI-generated frontends (used by v0, Bolt.new, and most AI code generators). 111,000+ GitHub stars.

Best for: React developers building UIs with Tailwind CSS, especially with AI code generation tools Works with: Next.js, Remix, Vite, Astro, Gatsby, any React framework

Key Features

Own Your Code

Components live in your project, not in node_modules. Full control to customize.

50+ Components

Button, Card, Dialog, Table, Form, Tabs, Sheet, Command Palette, Calendar, Chart, Carousel, Toast, and many more.

Accessible by Default

Built on Radix UI — keyboard navigation, screen reader support, and focus management out of the box.

Tailwind CSS Styling

Themed with CSS variables. Light/dark mode. Easily customize colors, spacing, and typography.

AI-Friendly

The most common component library used by AI code generators (v0, Bolt.new, Claude artifacts). AI tools generate shadcn/ui code by default.

CLI

Add individual components on demand — no bloated installs:

npx shadcn@latest add accordion alert-dialog avatar badge

FAQ

Q: What is shadcn/ui? A: A copy-paste React component library with 50+ accessible, Tailwind-styled components. You own the code — it's not a dependency. 111K+ GitHub stars.

Q: Is shadcn/ui a npm package? A: No. You copy component source code into your project via CLI. This means zero dependency, full customization, and no breaking updates.

🙏

Source & Thanks

Created by shadcn. Licensed under MIT. shadcn-ui/ui — 111,000+ GitHub stars

Related Assets

Dagger — Programmable CI/CD Engine

Run CI/CD pipelines as code — locally, in CI, or in the cloud. Replace YAML with real programming languages. Cacheable, portable, testable. 15.6K+ stars.

TokRepo精选

PandasAI — Chat with Your Data Using AI

Conversational data analysis with LLMs. Chat with SQL databases, CSV, Parquet files using natural language. Auto-generates Python/SQL and visualizations. 23K+ stars.

TokRepo精选

Vanna — Chat with Your SQL Database Using AI

AI-powered text-to-SQL. Ask questions in plain English, get accurate SQL queries and visualizations. Learns your schema. Works with any database. 23K+ stars.

TokRepo精选
◈Home🏆Trending👤Me