Remix

Step 1: Initialize Your Remix Project

Begin the installation process by creating a new Remix project using the create-remix command-line tool:

npx create-remix@latest my-app

Step 2: Execute the shadcn/ui Initialization Command

Run the shadcn/ui initialization command in your terminal to configure your project for using shadcn/ui components:

npx shadcn@latest init

Step 3: Configure the components.json File

You will be guided through a series of questions to configure the components.json file. This file is essential for customizing the behavior and location of shadcn/ui components within your project. Respond to the prompts as follows:

Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes

Step 4: Understanding the Recommended App Structure

• UI Components: It is recommended to place the shadcn/ui components within the app/components/ui folder for clear separation.

• Your Components: Your own custom React components can reside in the app/components folder.

• Utility Functions: The app/lib folder is a suitable location for all utility functions, including the cn helper function typically defined in a utils.ts file.

• Global Styles: The main app/tailwind.css file should contain your project's global CSS styles.

Step 5: Install and Configure Tailwind CSS

npm install -D tailwindcss@latest autoprefixer@latest

Next, create a postcss.config.js file at the root of your project with the following configuration:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Finally, update your remix.config.js file to enable Tailwind CSS and PostCSS processing:

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ...
  tailwind: true,
  postcss: true,
  ...
};

Step 6: Include tailwind.css in Your Application

In your application's root file, typically app/root.tsx, import the tailwind.css file to ensure your styles are included in the build:

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styles },
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
]

Step 7: Begin Adding Components

You have now successfully completed the initial setup. Your Remix project is configured, and you can begin adding individual shadcn/ui components using the npx shadcn@latest add command.

npx shadcn@latest add button

Executing the command shown above will add the Button component files to your project structure. You can then import and use the component in your Remix files as demonstrated below:

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

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}