Astro

Step 1: Initialize Your Astro Project

Begin the installation process by creating a new Astro project using the following command, which includes setting up Tailwind CSS and React:

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

Step 2: Configure Path Aliases in tsconfig.json

Modify your tsconfig.json file to include path aliases. This configuration is necessary for correctly resolving module paths within your project, particularly for components:

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

Step 3: Execute the shadcn/ui Initialization Command

Run the shadcn/ui initialization command in your terminal to configure your project for using shadcn/ui components:

npx shadcn@latest init

Step 4: Integrate Individual Components

You are now ready to begin adding individual shadcn/ui components to your Astro project as needed.

npx shadcn@latest add button

Executing the command shown above will add the Button component files to your project structure. You can then import and use the component in your Astro files as demonstrated below:

---
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="generator" content={Astro.generator} />
		<title>Astro + TailwindCSS</title>
	</head>

	<body>
		<div class="grid place-items-center h-screen content-center">
			<Button>Button</Button>
		</div>
	</body>
</html>