Configs2026年3月31日·1 分钟阅读

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
快速使用

先拿来用，再决定要不要深挖

这里应该同时让用户和 Agent 知道第一步该复制什么、安装什么、落到哪里。

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.

介绍

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.

🙏

来源与感谢

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

相关资产

ScrapeGraphAI — AI-Powered Web Scraping

Python scraping library powered by LLMs. Describe what you want to extract in natural language, get structured data back. Handles dynamic pages. 23K+ stars.

TokRepo精选

Kotaemon — Open-Source RAG Document Chat

Clean, open-source RAG tool for chatting with your documents. Supports PDF, DOCX, web pages. Multi-model, citation, and multi-user. Self-hostable. 25K+ stars.

TokRepo精选

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精选
◈首页🏆Trending👤我的