How to Use Shadcn UI in Rails 8 (Without React or Webpack)

If you have looked at frontend design anytime recently, you have definitely seen shadcn/ui . It is the most popular UI library in the world right now. It looks beautiful, minimal, and highly professional.

Very often I find myself wanting to use these beautiful components in my Rails apps. But immediately, I hit a massive wall.

Shadcn is built strictly for React . Its installation instructions ask you to run npx , install a bunch of Node.js dependencies, and compile JSX code.

If you are using Rails 8 with Importmaps , you do not have a build step. You do not have Node.js. You cannot just run bin/importmap pin shadcn because browsers do not understand React JSX natively.

Does this mean we can't use it? No.

Shadcn is just a combination of two things: Tailwind CSS (for the design) and Radix UI (for the JavaScript behavior).…