Using Shadcn-ui with Inertia and AdonisJS

Since AdonisJS V6 has experimental support for Inertia, I thought it might be a good idea to see if I could configure shadcn/ui to run with the aforementioned stack.

Configuring Inertia with AdonisJS

Since support is experimental, I'll refer you to Adonis'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, 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:

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

which then translates inside the inertia folder to:

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

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

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

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

https://codesandbox.io/devbox/adonis-shadcn-rntkn3?file=%2Finertia%2Fpages%2Fhome.tsx