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 autils.ts
where we define thecn
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>
);
}