bodega-ui

v0.1.0

Published

24 days ago

Bodega UI – React + TypeScript component library

0High
0Medium
0Low

wersplat

@bodega/ui

A shared design system powering the Bodega ecosystem — built for consistency, clarity, and long‑term scalability.

This package provides typed React components styled with CSS Modules and powered by multi‑brand design tokens.

Install

pnpm add @bodega/ui

Design Contract (Read This First)

@bodega/ui assumes the following:

@bodega/ui/base.css is imported once at the root of your app.
A data-theme attribute is set on the <html> element.
Avoid global element overrides (e.g. a {}, button {}, img {}) that conflict with component styling.
When using a workspace setup, ensure bodega-ui is built (pnpm build) or running in watch mode (pnpm dev) so dist/ exists.

If these conditions are not met, spacing, typography, and layout may break.

The library includes :focus-visible ring styles and respects prefers-reduced-motion.

Setup

Next.js (App Router / Pages Router)

In next.config.ts, add:

const nextConfig = {
  transpilePackages: ["@bodega/ui"],
};
export default nextConfig;

Restart your dev server after changing this.

Import base CSS in your root layout or _app.tsx:

import "@bodega/ui/base.css";

Set your theme on the <html> element:

<html data-theme="bodega"> {/* or lba | proamrank | college | bcg */}

Astro

// astro.config.mjs
import { defineConfig } from "astro/config";
export default defineConfig({
  vite: { optimizeDeps: { exclude: ["@bodega/ui"] } },
});

In your layout:

---
import "@bodega/ui/base.css";
---
<html data-theme="bodega">

Vite / TanStack Router

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({ plugins: [react()] });

In your entry file:

import "@bodega/ui/base.css";

Workspace Development

If using pnpm workspaces:

"@bodega/ui": "workspace:*"

Run inside bodega-ui:

pnpm dev

This keeps dist/ in sync during development.

If consuming from a registry, ensure dist/base.css exists before publishing.

Themes

Set data-theme on your root element.

All themes share the same layout system and component structure — only design tokens differ.

| Value | Description | |-------------|----------------------------------| | bodega | Default – Bodega orange | | lba | Dark purple | | proamrank | Blue / sport | | college | Navy / academic | | bcg | Bodega Cats GC – dark + cyan |

Components

| Component | Description | |----------------|-----------------------------------------------------| | Button | Primary, secondary, ghost, danger variants | | Card | Surface container with padding + shadow options | | Stack | Flexbox layout helper | | Container | Max-width centered wrapper | | Text | Polymorphic text with size/weight/color props | | Input | Labeled input with error + hint | | Badge | Status pills | | DataTable | Table with density modes, sorting, skeleton, empty | | StatTile | KPI card with delta indicator | | TopNav | Sticky nav with brand + mobile drawer | | SectionHeader | Page/section heading with optional action | | StatGrid | Responsive grid wrapper for StatTiles | | ProfileHeader | Avatar + kicker/title/badges/meta layout | | Tabs | Line + pill variants, count pills, href support | | EntityRow | Avatar row for lists, optional href | | KeyValue | Label/value pair, vertical or horizontal |

Usage Example

import { Button, Card, Stack, Text, Badge } from "@bodega/ui";

export function Demo() {
  return (
    <Card padding="lg" shadow>
      <Stack gap={4}>
        <Text as="h2" size="xl" weight="bold">Hello Bodega</Text>
        <Badge variant="success" dot>Active</Badge>
        <Button variant="primary" size="md">Get Started</Button>
      </Stack>
    </Card>
  );
}

Philosophy

This library is not a generic UI kit. It enforces:

Consistent spacing and typography
Predictable layout patterns
Controlled visual evolution across brands
Reduced per‑site design drift

Treat it as infrastructure, not decoration.