Create project
Start by creating a new Astro project:
npm create astro@latest
Configure your Astro project
You will be asked a few questions to configure your project:
- Where should we create our new project?
./your-app-name
- How would you like to start your new project?
Choose a starter template (or Empty)
- Do you plan to write TypeScript? Yes
- How strict should TypeScript be? Strict
- Install dependencies? Yes
- Initialize a new git repository? (optional) Yes/No
Add React to your project
Install React using the Astro CLI:
npx astro add react
Answer Yes
to all the question prompted by the CLI when installing React.
Add Tailwind CSS to your project
Install Tailwind CSS using the Astro CLI:
npx astro add tailwind
Answer Yes
to all the question prompted by the CLI when installing Tailwind CSS.
Edit tsconfig.json file
Add the following code to the tsconfig.json
file to resolve paths:
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./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/styles/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.mjs
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no
Write configuration to components.json Proceed? › yes
Import the globals.css file
Import the globals.css
file in the src/pages/index.astro
file:
---
import '@/styles/globals.css'
---
Update astro tailwind config
To prevent serving the Tailwind base styles twice, we need to tell Astro not to apply the base styles, since we already include them in our own globals.css
file. To do this, set the applyBaseStyles
config option for the tailwind plugin in astro.config.mjs
to false
.
export default defineConfig({
integrations: [
tailwind({
applyBaseStyles: false,
}),
],
});
Update tailwind.config.mjs
When running npx magicui-cli init
, your tailwind config for content will be overwritten. To fix this, change the module.exports
to export default
and the content
section with the code below to your tailwind.config.mjs
file:
export default {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
};
That's it
You can now start adding components to your project.
npx magicui-cli add blur-in
The command above will add the BlurIn
component to your project. You can then import it like this:
---
import BlurIn from "@/components/magicui/blur-in";
---
<html lang="en">
<head>
<title>Astro</title>
</head>
<body>
<BlurIn word={"Hello World"} client:load></BlurIn>
</body>
</html>