Astro - Shadcn Ui — ContextQMD

Starting a new project? Use shadcn/create for a fully configured Astro app with custom themes, Base UI or Radix, and icon libraries.

</Callout> <Steps>

Create project

Start by creating a new Astro project:

bash

npx shadcn@latest init -t astro

For a monorepo project, use --monorepo flag:

bash

npx shadcn@latest init -t astro --monorepo

Add Components

You can now start adding components to your project.

bash

npx shadcn@latest add button

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

astro

---
import { Button } from "@/components/ui/button"
---

<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 + Tailwind CSS</title>
	</head>

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

</Steps>