Astro

Install and configure Fabricator UI for Astro.

Choose the setup that matches your starting point.

Scaffold a new Astro project directly from the terminal.

Configure Fabricator UI manually in an existing Astro project.

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.


bunx --bun fabricator-ui@latest init -t astro

For a monorepo project, use --monorepo flag:


bunx --bun fabricator-ui@latest init -t astro --monorepo

To choose the base (base, radix or aria), use the -b flag. Base UI is the default.


bunx --bun fabricator-ui@latest init -t astro -b radix

Add Components

Add the Card component to your project:


bunx --bun fabricator-ui@latest add card

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


bunx --bun fabricator-ui@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.


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 Fabricator 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 init command to set up Fabricator UI in your project.


bunx --bun fabricator-ui@latest init

If the project already has components installed, init asks whether to add the @fabricator registry only, or to also apply the Fabricator theme. See Registry.

Add Components

You can now start adding components to your project.


bunx --bun fabricator-ui@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>

Search documentation