Skip to content

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):

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

rails generate inertia:install `--framework=react --typescript --vite --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:

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):

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

Initializing shadcn/ui

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

bash
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:

shell
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.