Integrating shadcn/ui

This guide demonstrates how to integrate shadcn/ui - a collection of reusable React components - with your Inertia Rails application.

Getting Started in 5 Minutes

If you're starting fresh, create a new Rails application with Inertia (or skip this step if you already have one):

rails new -JA shadcn-inertia-rails
cd shadcn-inertia-rails

rails generate inertia:install --framework=react --typescript --install-vite --install-tailwind --no-interactive
Installing Inertia's Rails adapter
...

NOTE

You can also run rails generate inertia:install to run the installer interactively. Need more details on the initial setup? Check out our server-side setup guide.

Setting Up Path Aliases

Let's configure our project to work seamlessly with shadcn/ui. Choose your path based on whether you're using TypeScript or JavaScript.

You'll need to configure two files. First, update your tsconfig.app.json:

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./app/frontend/*"]
    }
  }
  // ...
}

Then, set up your tsconfig.json to match shadcn/ui's requirements (note the baseUrl and paths properties are different from the tsconfig.app.json):

{
  //...
  "compilerOptions": {
    /* Required for shadcn-ui/ui */
    "baseUrl": "./app/frontend",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Initializing shadcn/ui

Now you can initialize shadcn/ui with a single command:

npx shadcn@latest init

✔ Preflight checks.
✔ Verifying framework. Found Vite.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › New York
✔ Which color would you like to use as the base color? › Neutral
✔ Would you like to use CSS variables for theming? … no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.js
✔ Updating app/frontend/entrypoints/application.css
✔ Installing dependencies.
✔ Created 1 file:
  - app/frontend/lib/utils.js

Success! Project initialization completed.
You may now add components.

You're all set! Want to try it out? Add your first component:

npx shadcn@latest add button

Now you can import and use your new button component from @/components/ui/button. Happy coding!

NOTE

Check out the shadcn/ui components gallery to explore all the beautiful components at your disposal.