Astro Installation

Install and configure your UI components for Astro projects.

Create project

Start by creating a new Astro project with Tailwind CSS and React:

pnpm dlx create-astro@latest astro-app --template with-tailwindcss --install --add react --git

Edit tsconfig.json

Add the following to tsconfig.json to resolve paths:

1{
2  "compilerOptions": {
3    // ...
4    "baseUrl": ".",
5    "paths": {
6      "@/*": [
7        "./src/*"
8      ]
9    }
10    // ...
11  }
12}

Run the CLI

Run the shadcn init command to setup your project:

pnpm dlx shadcn@latest init

Add Components

You can now start adding components to your project. For example, to add the Button component:

pnpm dlx shadcn@latest add button

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

1---
2import { Button } from "@/components/ui/button"
3---
4
5<html lang="en">
6  <head>
7    <meta charset="utf-8" />
8    <meta name="viewport" content="width=device-width" />
9    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
10    <meta name="generator" content={Astro.generator} />
11    <title>Astro + TailwindCSS</title>
12  </head>
13  <body>
14    <div className="grid place-items-center h-screen content-center">
15      <Button>Button</Button>
16    </div>
17  </body>
18</html>

For more details, see the documentation for each component.