Installing shadcn/ui on Remix project without using TypeScript

[ptlmay25]

Follow the following steps

Step 1 - Create Remix project with JavaScript using CLI command

npx create-remix@latest --template remix-run/remix/templates/remix-javascript

Step 2 - create jsconfig.json in the root folder and add following code

{
  "compilerOptions": {
    "paths": {
      "~/*": ["./app/*"]
    }
  }
}

Step 3 - Add path resolver to your vite.config.js file

 resolve: {
    alias: {
      "~": path.resolve(__dirname, "./app"), // Adjust the path according to your project's structure
    },
  },

Your vite.config.js file should look like this

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import path from "path";

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
        v3_singleFetch: true,
        v3_lazyRouteDiscovery: true,
      },
    }),
  ],
  resolve: {
    alias: {
      "~": path.resolve(__dirname, "./app"), // Adjust the path according to your project's structure
    },
  },
});

Step 4 - Install shadcn-ui with running CLI command

npx shadcn@latest init

Step 5 - Add shadcn-ui component for this example we are using Button component

npx shadcn@latest add button

Step 6 - Import any shadcn-ui button component or any other component in to your file

import { Button } from "~/components/ui/button";

export const meta = () => {
  return [
    { title: "New Remix App" },
    { name: "description", content: "Welcome to Remix!" },
  ];
};

export default function Index() {
  return (
    <>
      <Button className="bg-red-500">Click me</Button>
    </>
  );
}

This it enjoy coding.