Docs
Astro

Astro

Install and configure Astro.

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 your new project?
./your-app-name
- How would you like to start your new project?
Choose a starter template (or Empty)
- Install dependencies?
Yes
- Do you plan to write TypeScript?
Yes
- How strict should TypeScript be?
Strict
- Initialize a new git repository? (optional)
Yes/No

Add React to your project

Install React using the Astro CLI:

npx astro add react

Add Tailwind CSS to your project

Install Tailwind CSS using the Astro CLI:

npx astro add tailwind

Edit tsconfig.json file

Add the code below to the tsconfig.json file to resolve paths:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Run the CLI

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

npx shadcn-ui@latest init

Configure components.json

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

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.cjs
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no

Import the globals.css file

Import the globals.css file in the src/index.astro file:

---
import '@/styles/globals.css'
---

That's it

You can now start adding components to your project.

npx shadcn-ui@latest add button

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

---
import { Button } from "@/components/ui/button"
---
 
<html lang="en">
	<head>
		<title>Astro</title>
	</head>
	<body>
		<Button>Hello World</Button>
	</body>
</html>
GatsbyManual