Astro

Install shadcn/ui in Astro with the official CLI. React + Tailwind islands, then add a component from the shadcn.io registry.

init -t astro scaffolds the app. For an existing site: the with-tailwindcss template (or add React + Tailwind yourself), @/* → ./src/*, then init.

Use the CLI

Scaffold Astro from the terminal

Existing project

Add shadcn to a site you have

Use the CLI

Create the project

npx shadcn@latest init -t astro

Monorepo:

npx shadcn@latest init -t astro --monorepo

Add a component

npx shadcn@latest add https://www.shadcn.io/r/card.json

Monorepo: from apps/web, or -c apps/web from the root.

Import it

src/pages/index.astro

---
import Layout from "@/layouts/main.astro"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
---

<Layout>
  <Card className="max-w-sm">
    <CardHeader>
      <CardTitle>Project Overview</CardTitle>
      <CardDescription>
        Track progress and recent activity for your Astro app.
      </CardDescription>
    </CardHeader>
    <CardContent>
      Your design system is ready. Start building your next component.
    </CardContent>
  </Card>
</Layout>

Monorepo: apps/web/src/pages/index.astro, import @workspace/ui/components/card. apps/web/src/layouts/main.astro already imports @workspace/ui/globals.css.

Existing project

Create the app if you need one

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

That template loads CSS from src/layouts/main.astro. Keep the layout, or import @/styles/global.css on the page.

tsconfig.json

Skip if @/* is already there.

tsconfig.json

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

Run init

npx shadcn@latest init

Add a component

npx shadcn@latest add https://www.shadcn.io/r/button.json

src/pages/index.astro

---
import Layout from "@/layouts/main.astro"
import { Button } from "@/components/ui/button"
---

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