Remix

Install and configure Remix.

Create project

Start by creating a new Remix project using create-remix:

npx create-remix@latest my-app

Run the CLI

Run the shadcn-ui init command to setup your project:

npx shadcn@latest init

Configure components.json

You will be asked a few questions to configure components.json:

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

App structure

Note: This app structure is only a suggestion. You can place the files wherever you want.

Place the UI components in the app/components/ui folder.
Your own components can be placed in the app/components folder.
The app/lib folder contains all the utility functions. We have a utils.ts where we define the cn helper.
The app/tailwind.css file contains the global CSS.

Install Tailwind CSS

npm add -D tailwindcss@latest autoprefixer@latest

Then we create a postcss.config.js file:

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

And finally we add the following to our remix.config.js file:

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

Add `tailwind.css` to your app

In your app/root.tsx file, import the tailwind.css file:

import styles from "./tailwind.css?url";
 
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styles },
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];

That's it

You can now start adding components to your project.

npx shadcn@latest registry add @blode=https://blode.co/ui/r/{name}.json
npx shadcn@latest add @blode/ui
npx shadcn@latest add @blode/button

@blode/ui is the design system: it writes Blode's tokens into your CSS. Skip it and components install but render unstyled, because their variants compile to rounded-[var(--field-radius)] and h-[var(--field-height)].

The command above will add the Button component to your project. You can then import it like this:

import { Button } from "~/components/ui/button";
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

On This Page

Create project Run the CLI Configure components.json App structure Install Tailwind CSS Add tailwind.css to your app That's it