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 --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
:
{
"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.