bearnie

Introduction

This is not a component library. This is how you build yours.

This is not a component library. It’s how you build your component library.

Traditional component libraries ship as npm packages. You install them, import components, and use them in your app. This works until you need to customize something, then you’re wrapping components, overriding styles, or fighting against the library’s opinions.

Bearnie takes a different approach. Components are copied directly into your project. You own them. Modify anything, delete what you don’t need, make them completely yours.

Built specifically for Astro. No React, Vue, or Svelte required.

Your code

When you add a component, it lives in your project. Not in node_modules. Not behind an abstraction. Just files you can read, edit, and extend and delete as you need.

  • Full control: Change any line of code. No overrides, no workarounds.
  • No version lock: Components don’t break when dependencies update.
  • Learn by reading: See exactly how each component works.

No framework tax

Most component libraries are built for React, then ported elsewhere. Bearnie is built for Astro from the ground up.

  • Vanilla JavaScript: Interactive features use plain JS. No framework runtime shipped to the browser.
  • Progressive enhancement: Components work without JavaScript. Interactivity is added on top.
  • Zero client JS by default: Static components ship zero JavaScript.

Accessible defaults

Every component follows WCAG 2.1 AA guidelines. Keyboard navigation, screen reader support, and focus management are built in.

Distribution

Bearnie includes a CLI and MCP server to distribute components:

  • CLI: Add components to any Astro project with npx bearnie add button.
  • MCP: Let AI assistants add components for you.
  • Registry: A flat-file schema that defines components and their dependencies.

Quick example

---
import Button from '@/components/bearnie/button/Button.astro';
---

<Button>Click me</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>

Theming

Customize colors with CSS variables. Light and dark modes work out of the box:

:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
}

.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
}

Get started

Install components with the CLI, set up manually, or let your AI assistant do it for you.