How to set up shadcn/ui in AdonisJS 6 with Inertia.js

Recently, I’ve been playing around with Adonis to create my side-project. I especially like the fact that it’s batteries-included, which is a rare trait in the world of Javascript. I also like that it has an included adapter for Inertia, which lets me use popular frontend libraries while still using the many tools included with MVC frameworks. However, I hit a snag when I wanted to use shadcn/ui in my Inertia frontend. It turns out that using shadcn with Adonis and Inertia is not documented well. Luckily, with some help from random blog posts and other projects using Inertia, I was able to integrate shadcn successfully.

Setup

You can setup an Adonis/Inertia application by following the instructions here. For the rest of this article, I’m gonna assume that you have a working Adonis/Inertia application scaffolded using the Inertia starter kit.

Installing shadcn

To use shadcn/ui with Adonis’ Inertia adapter, we need to follow shadcn‘s instructions for installing it on a Vite application, but with a few modifications.

Install Tailwind

Since we have an Adonis application already, we can start by installing TailwindCSS.

1

npm install tailwindcss @tailwindcss/vite

Then, instead of src/index.css, replace the contents of inertia/css/app.css with:

1

@import "tailwindcss";

Edit tsconfig.json

Before editing tsconfig.json, we need to create a directory where the shadcn components will live. I created a lib/ directory inside inertia/ for this purpose. Next, we need to edit the tsconfig.json in the root directory of our app as well as the one in inertia/. For inertia/tsconfig.json, I did the following changes:

1
2
3
4
5
6
7
8
9
10
11
12
13

{
  "extends": "@adonisjs/tsconfig/tsconfig.client.json",
  "compilerOptions": {
     "baseUrl": ".",
     "module": "ESNext",
     "jsx": "react-jsx",
     "paths": {
       "~/*": ["./*"],
+      "@/*": ["./lib/*"]
    },
  },
  "include": ["./**/*.ts", "./**/*.tsx"],
}

For the tsconfig.json in the root folder, we need to follow the changes made to tsconfig.app.json, but modifying the baseUrl property to point instead to our created directory for shadcn components.

1
2
3
4
5
6
7
8
9
10
11
12

{
  "extends": "@adonisjs/tsconfig/tsconfig.app.json",
  "compilerOptions": {
    "rootDir": "./",
    "outDir": "./build",
+   "baseUrl": "./inertia/lib/",
+   "paths": {
+       "@/*": ["./*"]
+   }
  },
  "exclude": ["./inertia/**/*", "node_modules", "build"]
}

Update vite.config.ts

Next, we need to add tailwindcss() in the list of plugins in vite.config.ts.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

+ import tailwindcss from '@tailwindcss/vite'
...
export default defineConfig({
  plugins: [
    inertia({ ssr: { enabled: true, entrypoint: 'inertia/app/ssr.tsx' } }),
    react(),
    adonisjs({ entrypoints: ['inertia/app/app.tsx'], reload: ['resources/views/**/*.edge'] }),
+   tailwindcss(),
  ],

  /**
   * Define aliases for importing modules from
   * your frontend code
   */
  resolve: {
    alias: {
      '~/': `${getDirname(import.meta.url)}/inertia/`,
+     '@/': `${getDirname(import.meta.url)}/inertia/lib/`,
    },
  },
})

Initialize shadcn

Finally, we can now install shadcn and start adding components.

1

npx shadcn@latest init

Huge thanks to Matteo Gassend’s article and the Inertia Rails project for serving as basis for my research on integrating shadcn/ui with AdonisJS and Inertia.js.