Remix

Create project

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

npx create-remix@latest my-app

Run the CLI

Run the magicui-cli init command to setup your project:

npx magicui-cli init

Configure components.json

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

✔ Would you like to use TypeScript (recommended)? … no / yes
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … app/tailwind.css
✔ Would you like to use CSS variables for colors? … no / yes
✔ Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) …
✔ Where is your tailwind.config.js located? … tailwind.config.ts
✔ Configure the import alias for components: … ~/components
✔ Configure the import alias for utils: … ~/lib/utils
✔ Are you using React Server Components? … no / yes
✔ Write configuration to components.json. Proceed? … 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/magic-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

npm install @remix-run/css-bundle

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

import { cssBundleHref } from "@remix-run/css-bundle";
import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
import styles from "./tailwind.css"
 
export const links: LinksFunction = () => [
  ...(cssBundleHref
    ? [{ rel: "stylesheet", href: cssBundleHref }]
    : []),
  // ...
];

That's it

You can now start adding components to your project.

npx magicui-cli add blur-in

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

import BlurIn from "~/components/magicui/blur-in";
 
export default function Home() {
  return (
    <div>
      <BlurIn word={"Hello World"}></BlurIn>
    </div>
  );
}