Skip to content
shadcn.io
shadcn.io is not affiliated with official shadcn/ui

Astro

Install shadcn.io in an Astro project.

Use the shadcn.io preset

Initialize an Astro project with the shadcn.io registry preset.

Use the CLI

Scaffold a new Astro project directly from the terminal.

Existing Project

Configure shadcn.io manually in an existing Astro project.

Use the shadcn.io Preset

Create Project

Run the init command with the shadcn.io preset and the Astro template:

bunx --bun shadcn@latest init https://kit.dev/r/style.json -t astro

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add https://kit.dev/r/<component>.json (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:

bunx --bun shadcn@latest add https://kit.dev/r/button.json

You can also install every component at once:

bunx --bun shadcn@latest add https://kit.dev/r/ui.json

Then import and use components in an Astro page with a React client directive:

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 client:load>Button</Button>
  </div>
</Layout>

Use the CLI

Create Project

Run the init command to scaffold a new Astro project and configure shadcn.io:

bunx --bun shadcn@latest init https://kit.dev/r/style.json -t astro

For a monorepo project, use the --monorepo flag:

bunx --bun shadcn@latest init https://kit.dev/r/style.json -t astro --monorepo

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add https://kit.dev/r/<component>.json (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:

bunx --bun shadcn@latest add https://kit.dev/r/button.json

If you created a monorepo, run the command from apps/web or specify the workspace from the repo root:

bunx --bun shadcn@latest add https://kit.dev/r/button.json -c apps/web

You can also install every component at once:

bunx --bun shadcn@latest add https://kit.dev/r/ui.json

Then import and use components in an Astro page with a React client directive:

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 client:load>Button</Button>
  </div>
</Layout>

If you created a monorepo, update apps/web/src/pages/index.astro and import from your workspace UI package instead. The monorepo layout at apps/web/src/layouts/main.astro already imports your shared global CSS for you.

Existing Project

Create Project

If you need a new Astro project, create one first. Otherwise, skip this step.

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

This command sets up Tailwind CSS and the React integration for you. If you're adding shadcn.io to an older or custom Astro app, make sure both are configured before continuing.

The Tailwind starter loads your global stylesheet through src/layouts/main.astro. Keep that layout in place, or make sure your page imports @/styles/global.css.

Edit tsconfig.json

Add path aliases so imports resolve correctly:

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

Run the CLI

Run the shadcn init command with the shadcn.io preset to set up your project.

bunx --bun shadcn@latest init https://kit.dev/r/style.json

Add Components

You can add components with the CLI or copy them manually from the component docs:

  • CLI: Run npx shadcn@latest add https://kit.dev/r/<component>.json (e.g. button, dialog).
  • Manual: Copy component source from Manual tab in the component docs.

For example, add the Button component to your project:

bunx --bun shadcn@latest add https://kit.dev/r/button.json

You can also install every component at once:

bunx --bun shadcn@latest add https://kit.dev/r/ui.json

Then import and use components in an Astro page with a React client directive:

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 client:load>Button</Button>
  </div>
</Layout>