bearnie

Installation

Set up Bearnie in your Astro project.

Requirements

  • Astro 4.0 or later
  • Tailwind CSS v4

Start fresh

Create a new Astro project with Bearnie pre-configured:

npm create bearnie my-app
npm create bearnie my-app

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:

npx bearnie init
npx bearnie init

Add the theme styles:

npx bearnie add styles
npx bearnie add styles

Import the styles in your main CSS file:

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

Then add any component:

npx bearnie add button card dialog
npx bearnie add button card dialog

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:

npx bearnie add styles
npx bearnie add styles

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.

npx bearnie add button card
npx bearnie add button card
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:

npx bearnie add button --yes
npx bearnie add button --yes

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.

Next steps

Browse components or learn about the CLI.