Create project
Start by creating a new React project using vite
:
npm create vite@latest
Add Tailwind and its configuration
Install tailwindcss
and its peer dependencies, then generate your tailwind.config.js
and postcss.config.js
files:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Edit tsconfig.json file
Add the following code to the tsconfig.json
or tsconfig.app.json
file to resolve paths:
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}
Update vite.config.ts
Add the following code to the vite.config.ts so your app can resolve paths without error
# (so you can import "path" without error)
npm i -D @types/node
import path from "path";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});
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? › › src/index.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes (no)
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>
);
}