gitwtfhub

shadcn-ui/ui

★ 114,624TypeScriptAudience · developerComplexity · 2/5ActiveLicenseSetup · easy

TL;DR

Copy-paste React components into your project and customize them freely. Pre-built with Tailwind CSS and Radix UI, no dependency lock-in.

Mindmap

mindmap
  root((repo))
    What it does
      Copy-paste components
      Customize freely
      Own the code
    Tech stack
      React
      TypeScript
      Tailwind CSS
      Radix UI
    Use cases
      Build design systems
      Start component library
      Rapid UI prototyping
    Frameworks supported
      Next.js
      Laravel
      React
    Key benefit
      No dependency lock-in
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why anyone would actually build this

REASON 1

Build a custom design system by copying and modifying components to match your brand.

REASON 2

Quickly prototype a web app UI without installing heavy component library dependencies.

REASON 3

Create a reusable component library for your team by starting with these accessible, pre-styled components.

Stack

ReactTypeScriptTailwind CSSRadix UINext.js

Spinning it up

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

Wtf does this do

shadcn-ui/ui is a collection of beautifully-designed, accessible interface components that developers copy directly into their own projects and customize as they see fit. Unlike a traditional component library that you install as a dependency and use as-is, this project is described as a "code distribution platform", meaning you own the code once you add it, making it freely extendable. It works with frameworks including React, Next.js, Laravel, and uses Tailwind CSS and Radix UI as underlying building blocks (listed in the project topics). The goal is to give you a solid starting point for building your own component library. It is open source under the MIT license.

Yoink these prompts

Prompt 1
Show me how to copy a shadcn-ui button component into my React project and customize its colors with Tailwind CSS.
Prompt 2
I want to build a form with shadcn-ui components. Walk me through copying the form, input, and button components and wiring them together.
Prompt 3
How do I use shadcn-ui components in a Next.js app? Show me the setup and an example of adding a card component.
Prompt 4
I need to create a modal dialog. Show me how to copy the shadcn-ui dialog component and customize it for my use case.
View the repo → Decode another repo

← shadcn-ui on gitmyhub — every repo by this author, as a profile.

Don't trust strangers blindly. Verify against the repo.