Skip to content

shadcn/ui

shadcn/ui gives you styled React components you add as editable source. Choose a recipe that matches your project, then see what it changes and how you will keep it up to date.

Visit shadcn/ui

What do you get when you add an Alert Dialog?

You get source files for a styled control that asks someone to make a decision. The docs provide Alert Dialog recipes for Base UI and Radix, the packages that supply interaction behavior in those recipes.

Start with whichever setup your project already uses. Put in a title that says what will happen, a way to back out and one clear confirmation. Your app decides what confirmation changes. For a fake settings screen, it could switch just the sample display choice.

How can you see what adding a component will change?

Use the CLI, a tool you run from a terminal, to preview changes before writing files. The add command supports a dry run and a file diff. It can add packages as well as component source.

Use the installation instructions for your project type. If you already have a custom dialog or theme, look at the existing version before adding a new one. Ask your coding tool to show the planned changes before it overwrites a file.

Try the changes in a disposable copy. Use the keyboard to open the dialog, reach both actions and dismiss it. Check what focus does when it opens and closes, and verify the dummy choice changes only after confirmation.

Where should you change the appearance?

Start with the theme if several controls should share the same change. In projects using the documented CSS variable setup, those shared style values let one color change reach the controls that reference it.

Use a local edit when only one dialog needs extra room for its explanation. Check how the result looks in light and dark themes. Focus should remain easy to see even if you change the control’s colors.

Who applies fixes after you customize it?

You maintain the files the CLI added to your project. An update to a package can fix behavior inside that package. A fix to the copied file still needs to be compared with your local version and merged.

The main shadcn/ui repository uses MIT. Keep the required notices for the code you use. For an item from another registry, check that item’s source, package requirements and license separately.