Shadcn + v0.dev with Rails + React

[serene drum]

It’s been quite easy to build NextJS apps using the combo of ShadCN and v0.dev. I can now just prompt and build frontend UI on React.

I tried integrating Shadcn component libraries from https://ui.shadcn.com/docs/installation/vite for an inertia-rails project with limited success. Following this tutorial as it is, is not functioning with the existing Rails/React setup — https://github.com/shreyas-makes/rails-react-inertia-vite

This is a huge unlock to use https://v0.dev/ for all my frontend needs, and I’m a bit stuck in this process. Would appreciate some help!

[slate steppe]

What part doesn't work exactly? I remember having troubles with shadcn and typescript aliases while generating new components, is that something you have trouble with?

[serene drum]

Yes same problem, stuck with Shadcn and typescript aliases

@slate steppe — I tried both options, the installation option for Vite (https://ui.shadcn.com/docs/installation/vite) as well as the manual one (https://ui.shadcn.com/docs/installation/manual)

Both had similar alias issues

[slate steppe]

here's my tsconfig.json:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    /* Fixes https://github.com/shadcn-ui/ui/issues/3411 */
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./app/frontend/*"
      ]
    }
  }
}

and here's the shacdn's components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/frontend/entrypoints/application.css",
    "baseColor": "stone",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

[serene drum]

@slate steppe thanks for this!!

I added the components.json file as well as the tsconfig.json file. After this, I did npx shadcn add to add a slider component as an example. It did ensure that the component was added to the respective app/frontend/components/ folder.

I then created a controller using rails g inertia:controller [ControllerName] actions and then inserted the slider component into the .tsx file.

When I tried running the demo app, I got this error:

21:06:51 web.1  | ActionController::RoutingError (No route matches [GET] "/stylesheets/application.css"):
21:06:51 web.1  |   
21:06:52 vite.1 | 9:06:52 PM [vite] Internal server error: Failed to resolve import "@/lib/utils" from "app/frontend/components/ui/slider.tsx". Does the file exist?
21:06:52 vite.1 |   Plugin: vite:import-analysis
21:06:52 vite.1 |   File: /Users/shreyas/Desktop/Projects/inertiarocks/app/frontend/components/ui/slider.tsx:4:19
21:06:52 vite.1 |   17 |  import * as React from "react";
21:06:52 vite.1 |   18 |  import * as SliderPrimitive from "@radix-ui/react-slider";
21:06:52 vite.1 |   19 |  import { cn } from "@/lib/utils";
21:06:52 vite.1 |      |                      ^
21:06:52 vite.1 |   20 |  const Slider = React.forwardRef(
21:06:52 vite.1 |   21 |    _c = ({ className, ...props }, ref) => /* @__PURE__ */ jsxDEV(

It seems that @/lib/utils is missing a file. I'm not sure what file needs to be added, and I'm also unsure why there is a GET error for "/stylesheets/application.css" since the stylesheets are under /frontend/entrypoints/application.css

This the git repo: https://github.com/shreyas-makes/inertiarocks

[slate steppe]

here's my app/frontend/lib/utils.ts, don't remember if shadcn adds that while initialization or not:

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

[serene drum]

It works! Thank you so much!

[serene drum]

I wasn't able to do the initialization due to the aliasing conflict. so I had to manually add the files individually. (lib/utils.ts, tsconfig.json and components.json)

[regal falcon]

@serene drum when run eg. npx shadcn@latest add button does it installed in app/frontend/ folder? when I ran the command, it seems to have installed outside of app folder

[slate steppe]

@regal falcon I wrote a small cookbook article for the shadcn/ui integration, please let me know if that helps: https://inertia-rails.netlify.app/cookbook/integrating-shadcn-ui