Using Shadcn-ui with Inertia and AdonisJS
Tags: adonisjs, react, inertiajs, tutorial
Published: 2024-03-26 14:01:34

---
title: "Using Shadcn-ui with Inertia and AdonisJS"
cover_image: "https://cdn.blog.matteogassend.com/adonisjs_inertia_shadcn_cover.webp"
canonical_url: "https://matteogassend.com/blog/using-shadcn-ui-with-inertia-and-adonisjs"
tags:
- adonisjs
- reactjs
- inertiajs
- tutorial
published: true
---

Since [AdonisJS](https://adonisjs.com) V6 has experimental support for [Inertia](https://inertiajs.com), I thought it might be a good idea to see if I could configure [shadcn/ui](ui.shadcn.com) to run with the aforementioned stack.

## Configuring Inertia with AdonisJS

Since support is experimental, I'll refer you to [Adonis](https://docs.adonisjs.com/guides/inertia#installation)'s documentation on this procedure. If you're starting from scratch, it may be as simple as installing their inertia starter kit.

## Installing Shadcn/ui

To install [shadcn/ui](ui.shadcn.com), you can follow the basic instructions for Vite-based projects, but we'll need to adapt a few steps.
The one thing to keep in mind is that you need to specifiy inertia's css file as the `global CSS file` during setup.

### Where to store components and libs

I would personally advice (also, this is what I tested) to store all shadcn related files inside the `inertia` folder; i personally created a `lib` folder and had shadcn install everything in there.

### tsconfig

The documentation asks us to create aliases in both the `tsconfig` file and the `vite.config.{js|ts}` file. If you only change those in the root directory, shadcn will work fine, but your inertia pages will not be able to resolve the imports using those aliases.
You can definitely stop here for this step and modify the imported components to use a normal path instead of the aliases it includes.

But if you want to avoid that headache, there is one more tsconfig file you'll need to modify; the one inside the `inertia` folder. Just copy the same aliases you just set up in the root project.

Here's, for example, my root project tsconfig:

```js
{
  compilerOptions: {
    paths: {
      //other paths can go here
      "@/*": ["./inertia/lib/*"]
    }
  }
}
```

which then translates inside the `inertia` folder to:

```js
compilerOptions: {
  paths: {
    // other paths here
    "@/*": ["./lib/*"]
  }
}
```

as for the vite config, here's the interesting bit:

```js
{
  resolve: {
    alias: {
      // other aliases can go here
      '@': `${getDirname(import.meta.url)}/inertia/lib`
    }
  }
}
```


### Tailwind Config

After running the installation commands, we need to change a few settings from those created by default in our tailwind config file. This is because shadcn makes certain assumptions regarding the location of all our components and files.
The only thing to modify is the `content` array. If you're only using inertia (with React, in this case), you can probably use something like this:

```js
{
  content: [
    "./inertia/**/*.{js,ts,jsx,tsx}"
  ]
}
```

## Conclusion

There you go! Now you can enjoy using shadcn/ui with Inertia and AdonisJS. To demonstrate this, I built a small example you can find below:

{% codesandbox rntkn3 %}