Menu

Post image 1
Post image 2
Post image 3
1 / 3
0

The Importmap Guide to Shadcn: Beautiful UI with Zero Build Step

DEV Community·Zil Norvilis·about 1 month ago
#zj9CeP07
Reading 0:00
15s threshold

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). We can easily replicate this in pure Rails using Importmaps and Stimulus.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More