shadcn/ui, open-source, copy-owned UI components for developers building their own design system with full code control.
O que faz
shadcn/ui is an open-source, open-code set of beautifully designed UI components you copy into your own codebase rather than install as a black-box package. It is a foundation for building your own component library, not a traditional NPM dependency.
Most component libraries trap you. You install a package, and the moment you need to deviate from its opinions, you are writing workarounds, overriding styles, or mixing incompatible APIs from three different libraries. shadcn/ui breaks that pattern by handing you the actual source code of every component.
shadcn/ui is described in its own docs as "not a component library" but rather "how you build your component library." You copy components directly into your project via a CLI. From that point, the code is yours to read, edit, and extend without any abstraction layer between you and the markup.
The CLI fetches a flat-file component schema and writes the component source into your repo. Every component follows a composable interface, so they are predictable when you stack them together. The project ships with a registry system, so teams can distribute their own customized component sets across projects, including private GitHub registries.
Five core principles drive the project, per the docs: Open Code (you see every line), Composition (a common, composable interface), Distribution (CLI plus flat-file schema), Beautiful Defaults (carefully chosen out-of-the-box styles), and AI-Ready (open code that LLMs can read and modify directly). That last point matters: because there is no compiled abstraction, an agent or coding model can reason about and rewrite your components the same way a human would.
The component catalog covers over 70 primitives, from everyday building blocks like Button, Input, and Badge to heavier pieces like Data Table, Chart, Sidebar, Carousel, and a new suite of Chat interface components including Message, Bubble, and Message Scroller. The project is MIT-licensed and the source is on GitHub.
Owning the code cuts both ways. You get full control, but you also own every future bug fix and upgrade. When shadcn/ui ships an improved version of a component, you merge it manually rather than bumping a version number. Teams that want zero-maintenance dependency management will find this model more demanding than a traditional library.
shadcn/ui is the right starting point when your product needs a design system that is truly yours: a polished, accessible base you extend rather than fight against. It pairs naturally with AI-assisted development because every component is legible to a coding model, making it one of the most agent-friendly UI foundations available today.
Recursos
Notas de campo
Revisado em Jun 27, 2026
Ideal para
Resultados para quem cria
Atenção
Testado com
Ferramentas usadas
shadcn/ui is an open-source set of accessible, beautifully designed UI components distributed as copyable source code rather than an installable NPM package. Per its own docs, it is not a component library but a foundation for building your own. You use its CLI to pull individual component files into your project, at which point you own the code outright and can modify it however you need.
shadcn/ui ships a CLI tool that fetches component source files and writes them directly into your codebase using a flat-file schema. You run the CLI command for the component you want, and the files land in your project ready to edit. Full documentation, including installation steps for different frameworks, is available at ui.shadcn.com/docs.
Yes. shadcn/ui is licensed under the MIT license, as stated in its GitHub repository. There are no paid tiers or commercial restrictions mentioned in the sources; the code is freely available on GitHub and can be used in personal and commercial projects.
shadcn/ui is best for teams that need a design system they can fully own and customize, without fighting a third-party library's opinions. It is particularly well-suited to AI-assisted development workflows because every component is open, readable source code that LLMs can understand and modify directly, a capability the project explicitly calls out as a core design principle.
Traditional libraries ship compiled packages you install via NPM; customization means wrapping components or overriding styles, and you rely on the library's release cycle for fixes. shadcn/ui instead copies raw component source into your repo, giving you full transparency and edit access. The tradeoff is that you own all future maintenance: upgrading a component means manually merging changes rather than bumping a semver number.
The copy-ownership model means component upgrades are manual rather than automatic, which increases maintenance burden as the upstream project evolves. Teams managing many repositories may find distributing and keeping components in sync across projects more complex, though the built-in registry system is designed to help with this. The flat-file, open-code approach also assumes developers are comfortable reading and modifying component internals, which is less suitable for teams that prefer abstracted, zero-touch dependencies.
Simon Willison@simonw
“@claudiombsilva I love how much fun it is generating code examples with LLMs - in this case my prompt was: "Build me a cool artifact using Shadcn UI and Recharts around the theme of a Pelican secret society trying to take over Half Moon Bay…”
Lee Robinson@leerob
“@xdotli Yeah, I think "copy paste is better than the wrong abstraction" is exactly why people are enjoying shadcn/ui. We need more tools like this.”
Prasenjit Sarkar@stretchcloud
“The chat UI layer for AI is consolidating. shadcn shipped a new set of components for building AI chat interfaces today. The framing matters: not a template, not a starter kit, but a component system built on the patterns they ship every da…”
Micka@micka_design
“The most underrated thing about @shadcn: it has NO opinion on how your app should feel. YOU bring the personality. YOU bring the taste. Shadcn/ui primitives give you the best place to start. Here's what mine became (fully open source) Thank…”
78+ animated shadcn/ui components plus 100+ AI agent patterns, distributed as copy-paste source, free, open-source, and zero npm lock-in.
Best for React and Tailwind teams already using shadcn/ui who want animated, accessible components without npm package overheadUma biblioteca de componentes glassmórficos inspirada na Apple, construída sobre shadcn/ui e Base UI, com componentes estilizados em vidro prontos para uso (alert, button, card, calendar, popover, sidebar e mais), instaláveis via o registro do shadcn.
Best for Adicionar UI com glassmorphism a um projeto shadcn/uiUma coleção de layouts de UI open-source criados com cuidado usando Next.js e shadcn/ui, incluindo dashboards, trackers e templates de aplicativos com demos ao vivo, disponíveis nas variantes Radix UI e Base UI.
Best for Iniciar uma UI de aplicativo a partir de um layout realista e completoUma coleção de spinners, loaders e animações de carregamento para aplicações web modernas, construída com React, Next.js, shadcn/ui, Tailwind CSS e Framer Motion.
Best for Adicionar spinners e animações de carregamento rapidamenteOpen-source React component kit for agentic AI apps: streaming chat, tool calls, reasoning, citations, and more, SDK-agnostic and fully owned by your codebase.
Best for React teams building agentic or chat interfaces who want streaming-ready components without writing them from scratchUma biblioteca de animações de carregamento reutilizáveis no estilo dotmatrix para React e Next.js, instalável pelo registro do shadcn ou copiando o código-fonte direto da documentação.
Best for Loaders com estilo dotmatrix distinto