111k
New

Astro

PreviousNext

Install and configure shadcn/ui for Astro.

Choose the setup that matches your starting point.

Use shadcn/create

Build your preset and generate an Astro project command.

Use the CLI

Scaffold a new Astro project directly from the terminal.

Existing Project

Configure shadcn/ui manually in an existing Astro project.

Use shadcn/create

Build Your Preset

Open shadcn/create and build your preset visually. Choose your style, colors, fonts, icons, and more.

Open shadcn/create

Create Project

Click Create Project, choose your package manager, and copy the generated command.

The generated command will look similar to this:

pnpm dlx shadcn@latest init --preset [CODE] --template astro

The exact command will include your selected options such as --base, --monorepo, or --rtl.

Add Components

Add the Card component to your project:

pnpm dlx shadcn@latest add card

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

pnpm dlx shadcn@latest add card -c apps/web

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

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>

If you created a monorepo, update apps/web/src/pages/index.astro and import from @workspace/ui/components/card instead. The monorepo layout at apps/web/src/layouts/main.astro already imports @workspace/ui/globals.css for you.

Use the CLI

Create Project

Run the init command to scaffold a new Astro project. Follow the prompts to configure your project: base, preset, monorepo, and more.

pnpm dlx shadcn@latest init -t astro

For a monorepo project, use --monorepo flag:

pnpm dlx shadcn@latest init -t astro --monorepo

Add Components

Add the Card component to your project:

pnpm dlx shadcn@latest add card

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

pnpm dlx shadcn@latest add card -c apps/web

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

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>

If you created a monorepo, update apps/web/src/pages/index.astro and import from @workspace/ui/components/card instead. The monorepo layout at apps/web/src/layouts/main.astro already imports @workspace/ui/globals.css for you.

Existing Project

Create Project

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

pnpm 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/ui 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 file

If your project already has the @/* alias configured, skip this step.

Add the following code to the tsconfig.json file to resolve paths:

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

Run the CLI

Run the shadcn init command to set up your project:

pnpm dlx shadcn@latest init

Add Components

You can now start adding components to your project.

pnpm dlx shadcn@latest add button

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

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>