# shadcn/ui

> Components you copy into your repository and then own outright

Category: UI component libraries (https://aiarabicdev.com/ui-components)
Canonical page: https://aiarabicdev.com/ui-components/shadcn-ui
Tags: react, tailwind, registry, accessible, copy-paste

shadcn/ui is a set of accessible React components distributed as source rather than as a package. The CLI writes the component into your project, where it becomes ordinary code you can edit. It also defines the registry format that most of the newer libraries in this directory publish through.

## Facts

- Licence: MIT
- Language: TypeScript
- Cost: Free and open source
- Self hostable: yes
- Added: 2026-08-23
- Last checked: 2026-08-23

## Links

- Website: https://ui.shadcn.com
- Source: https://github.com/shadcn-ui/ui
- Docs: https://ui.shadcn.com/docs

## Why the distribution model matters

Every component library eventually asks you to fight its API to get the markup you want. shadcn/ui removes the fight by removing the boundary: the component is a file in your repository, so changing it is an edit rather than a feature request.

The cost is real and worth stating. You do not get upgrades. If an accessibility fix lands upstream, you have to notice and port it. Teams that treat these files as generated code and never revisit them slowly drift away from the source.

## The registry is the bigger story

The registry format shadcn defines is now how a large part of the React ecosystem ships UI. A registry item is a JSON file listing files, dependencies and where each file lands, which is why the same CLI can install from any project that publishes one.

That is what makes third party registries work. Point the CLI at a URL and the files arrive in your repository under your conventions.

## Reach for it when

- you want full control of the markup and the classes
- the project already runs Tailwind
- you are building your own design system and need a credible starting point

## Watch out for

- there are no upgrades, so upstream fixes only reach you if you go and get them
- it assumes Tailwind, and retrofitting it into a CSS-in-JS codebase is not worth the effort
- the defaults are widely recognised, so a project that ships them untouched looks like every other one

## Get started

Initialise:

```sh
pnpm dlx shadcn@latest init
```

Add a component:

```sh
pnpm dlx shadcn@latest add button dialog
```

---

aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements.
New entries are announced at https://t.me/arabic_Intelligence