Websites · Glossary

What is shadcn/ui?

shadcn/ui is an open source collection of React components, such as buttons, dialogs, forms, tabs and tables, built with Tailwind CSS and accessible primitives like Radix UI. Instead of installing it as a package, you copy each component's code into your own project, so you own it and can change it freely.

Most component libraries are dependencies you install and style from outside. shadcn/ui turned that around: a command copies the source of each component into your code, where it becomes yours.

Nuwan Madhusanka · Co-founder

3 min read · Published 13 October 2026

How it works

A command line tool adds a component, for example a dialog, by writing its source file into the project, usually under components/ui. The component uses Tailwind classes and design tokens for its look and accessible primitives for its behaviour, such as focus handling and keyboard support in menus and dialogs.

Why developers like it

You get well built, accessible components without being locked into a library's styling or release schedule. Changing a component is editing a file you own. The shared token approach means one change to the theme colours restyles every component consistently, including in dark mode.

Why AI builders use it

A known set of components with predictable names and props lets an AI agent compose interfaces reliably, and it keeps accessibility details, which are easy to get wrong when writing from scratch, inside tested components. The generated code stays readable for a developer who takes it over.

Common mistakes

Copying a component and then editing it so heavily that updates from upstream become hard to apply, mixing several component libraries with clashing styles, and ignoring the accessible structure, for example removing labels from form controls.

Where it shows up in OneCraft

Code mode sites are built from shadcn/ui components on a React Router and Tailwind starter, and the AI is instructed to use those components rather than inventing its own. The native app in Code mode uses the React Native counterpart, React Native Reusables. Each change passes a type check, a linter, the build and a layout test.

Questions people ask

Is shadcn/ui a component library?

Not in the usual sense. It is a collection of component source code you copy into your project with a command, rather than a package you install and update. The creator describes it as a way to build your own component library, starting from good defaults.

Is shadcn/ui free?

Yes. It is open source under the MIT licence and free for commercial use. The components depend on other open source projects, such as Radix primitives and Tailwind CSS, which are also free and listed in the project dependencies with their own licences.

Does shadcn/ui work without Tailwind?

The components are written with Tailwind classes, so Tailwind is the expected setup. You could restyle them by hand, but most projects that use shadcn/ui use Tailwind as well, along with its design tokens for colours and corner radii, which is how a theme change restyles every component at once.

Are shadcn/ui components accessible?

They are built on accessible primitives that handle keyboard navigation, focus and screen reader attributes for complex widgets such as dialogs, menus and tabs. Your content still matters: labels, alt text and colour contrast remain your responsibility when using them.

What is React Native Reusables?

A project that brings the shadcn/ui approach to React Native apps: components you copy into your app project, styled with Tailwind style classes, with similar names and structure. It lets a website and a phone app built with the same thinking share a design language.

Make one with websites

The button opens the generator with this use case already described. Change the wording to match your own.

Create a website with OneCraft

Sources

Written and checked by the OneCraft team. Last checked 13 October 2026.