Installation

Start fresh

Create a new Astro project with Bearnie pre-configured:

Then navigate to your project and start developing:

cd my-app
npm install
npm run dev

Full install

Want all components included from the start? Use the --full flag:

npx create-bearnie my-app --full

This fetches all components from the registry and installs them in your project. Great for exploring or prototyping.

Add to existing project

Run the init command to configure your existing Astro project:

Add the theme styles:

Import the styles in your main CSS file:

@import "tailwindcss";
@import "./bearnie.css";

Then add any component:

When you add interactive components, Bearnie installs shared runtime helpers under src/utils/runtime/ automatically. No manual runtime wiring is needed.

Manual setup

1. Add the cn utility

Create src/utils/cn.ts:

export function cn(...classes: (string | undefined | null | false)[]): string {
  return classes.filter(Boolean).join(' ');
}

2. Configure path aliases

Add to your tsconfig.json:

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

3. Add theme styles

Add the styles via CLI:

Then import in your main CSS file:

@import "tailwindcss";
@import "./bearnie.css";

4. Add components

Use the CLI or copy components from src/components/bearnie/ to your project.

src/
├── components/
│   └── bearnie/
│       ├── button/
│       │   └── Button.astro
│       └── card/
│           ├── Card.astro
│           ├── CardHeader.astro
│           └── CardContent.astro
├── styles/
│   └── bearnie.css
└── utils/
    ├── cn.ts
    └── runtime/
        ├── loader.ts
        └── ui-boot.ts

Updating components

Components and styles are copied to your project — you own them. They don’t auto-update when Bearnie releases changes.

To update a component or styles:

If you’ve customized a component, running this will overwrite your changes. Back up your modifications first, then merge manually after updating.

This is intentional. You control when updates happen and what gets changed.