🐻 @bearishfh/components

Bearish UI is a modular, accessible, and style-consistent React component library. Built with TypeScript and powered by @bearishfh/icons.

📦 Installation

npm install @bearishfh/components @bearishfh/icons

pnpm add @bearishfh/components @bearishfh/icons

@bearishfh/icons is a required peer dependency.

⚡️ Usage

Import the stylesheet once at your app root (_app.tsx, layout.tsx, or main.tsx):

import "@bearishfh/components/styles.css";

Then use components:

import "@bearishfh/components/styles.css";
import { Button } from "@bearishfh/components";

export default function App() {
  return (
    <Button variant="primary" onClick={() => alert("Hello 🐻")}>
      Click me
    </Button>
  );
}

🧱 Components

Button

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost" loading>Loading</Button>
<Button variant="danger" disabled>Delete</Button>

| Prop | Type | Default | |---|---|---| | variant | "primary" \| "secondary" \| "ghost" \| "danger" | "primary" | | size | "sm" \| "md" \| "lg" | "md" | | loading | boolean | false | | disabled | boolean | false | | onClick | () => void | — |

Input

<Input label="Email" placeholder="[email protected]" />
<Input label="Password" type="password" error="Required" />

| Prop | Type | Default | |---|---|---| | label | string | — | | type | string | "text" | | error | string | — | | disabled | boolean | false |

Badge

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="danger">Error</Badge>

Card

<Card>
  <Card.Header>Title</Card.Header>
  <Card.Body>Content goes here.</Card.Body>
  <Card.Footer>
    <Button size="sm">Confirm</Button>
  </Card.Footer>
</Card>

🎨 Theming

Override CSS variables in your global stylesheet:

:root {
  --bear-color-primary:  #8B4513;
  --bear-color-bg:       #ffffff;
  --bear-color-surface:  #f9f5f2;
  --bear-color-border:   #e4d9d0;
  --bear-color-text:     #1a1a1a;
  --bear-radius-md:      8px;
}

🧠 FAQ

Do I need to configure anything after installing? No. Just import styles.css once at your root and you're ready.

Can I use this with Next.js App Router? Yes. Import the styles in app/layout.tsx and use components anywhere.

Is TypeScript supported? Yes. Full type definitions are included.

📝 License

MIT © Bearish FH