Back to insights
Insight

Migrating to shadcn/ui

Why I moved to shadcn/ui and how its open-code component approach changed the way I build interfaces.

Modular ceramic interface tiles moving from a fixed tray into a flexible composition

Most UI libraries hand you a package to install and a set of decisions you did not get to make. shadcn/ui does something different, and it changed how I think about component ownership.

Copy the code, not the dependency

There is no package to install. Instead, you copy the component's source directly into your project. That single decision changes the relationship: the component is now your code, not a dependency you are waiting on someone else to update.

Built on Radix UI and Tailwind CSS

The components are built on Radix UI for behavior and accessibility, and styled with Tailwind CSS. Radix handles the parts that are easy to get wrong, like focus management and keyboard navigation, and Tailwind handles everything visual.

Accessibility by default

Buttons, menus, dialogs, and tooltips ship with keyboard navigation and screen reader support already handled, in line with the Web Content Accessibility Guidelines. That is a meaningful amount of work I did not have to redo myself.

What changed

Owning the component source instead of importing it turned out to matter more than I expected. When something needs to behave differently for one project, I change the code directly instead of working around an API that was not designed for my case. A later article will go into how the migration itself went.