shadcn/ui

You might say

Is there a set of good-looking components I can copy into my project and customize?

A collection of editable UI component code that you add to a React projectAdding Button puts component files in your project, so changing those files changes the buttons on your site. It is not an online component service; your project owns the maintenance after you add it.

Know first

React Tailwind CSS npm

shadcn

Where does Button code go after the command runs?

Terminal

$ ls components/ui
(No Button yet)

components / ui

localhost:3000

The page uses a file in this project

How adding a component puts code in the project

The command adds files: Adding Button writes component files into the current project.

The files are yours to change: Open the Button file to change its style, size, or behavior.

The preview uses that code: After you save, the page uses the updated project component.

Quick checkChoose the best answer

After running the shadcn/ui command to add Button, how should the team understand the component?

Button automatically follows every upstream update without reviewing local changes or compatibilityButton code now lives in the project, pages import that file, and the project owns future changes and upgradesButton remains hosted by shadcn/ui, so the project can only change call parameters and cannot edit the component file

You can say this to an AI Agent

First check whether this project has initialized shadcn/ui and already contains a Button component. Reuse an existing Button instead of generating a duplicate. If shadcn/ui is initialized but Button is missing, run `npx shadcn@latest add button` from the project root, then use the generated Button on an existing page. Tell me where the component file was written, run the project checks, and open the page to verify its appearance and click behavior.

Learn next

1React→2Tailwind CSS→3Button→4Form→5Modal→

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.