Installation | Bearnie

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

Then navigate to your project and start developing:

cd my-app
npm run dev

Add to existing project

Run the init command to configure your existing Astro project:

npx bearnie init

Add the theme 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

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

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

src/
├── components/
│   └── bearnie/
│       ├── button/
│       │   └── Button.astro
│       └── card/
│           ├── Card.astro
│           ├── CardHeader.astro
│           └── CardContent.astro
├── styles/
│   └── bearnie.css
└── utils/
  └── cn.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

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.