GitHub radar

shadcn/ui: copy the component code, don't just install it

With shadcn/ui, a UI component is not installed as a package - its code is copied straight into your project, yours to edit afterward. The tool is three and a half years old and has crossed 127,000 stars on GitHub.

01shadcn-ui/ui 128kTypeScript

shadcn/ui is a set of ready-made interface elements: buttons, forms, tables, dialogs and dozens more. The difference from a regular component library is that you don't install an npm package - you copy a component's source code into your own project through a command-line tool, and from that point it's your code, free of a third-party library's limits. The authors put it plainly: "Open Source. Open Code. Use this to build your own component library." The latest versions added "AI Elements": ready-made building blocks for chatbot and AI-agent interfaces - a conversation window, a model-thinking indicator, a confirmation prompt before an agent acts, a card for a tool the agent called. Like the regular components, these are not installed as a package either, just copied into the project as code. There is also a Registry system: your own private component registry you can share with a team or the public, and it works with any framework, not only React.

Why a vibe-coder should care

For anyone building an interface with an AI agent's help, this fits well precisely because the agent gets ordinary code in hand, not a black-box package - easier to adjust on request. Starting a chatbot or an agent interface doesn't have to begin from zero: the authors built a separate chatbot template with AI Elements and the AI SDK ready to go. The downside is the same one any copied code carries: library updates don't flow in automatically - each component you copied has to be updated by hand if the author ships a fix.

How to install

Copy this and send it to your agent — Claude Code, Codex, any of them:

Set up a shadcn/ui-based interface in my project: deploy the chatbot template from https://github.com/shadcn-ui/chatbot-template, wire it up per the README, ask me for a model API key if you need one, and show me the resulting chat.

Runs on a regular laptop - this is not a standalone program but component code for a JavaScript/TypeScript project; no video card or server needed.

Open on GitHub