Baba Kit

Shared UI tokens, primitives, app chrome, and internal-tool icon assets for Baba internal tools.

This package is for internal tools only. It is not the full Baba public brand system.

Install

bun add @babaandco/kit

Tailwind Apps

// tailwind.config.ts
import babaKitPreset from "@babaandco/kit/tailwind";

export default {
  presets: [babaKitPreset],
  content: [
    "./app/**/*.{ts,tsx,mdx}",
    "./components/**/*.{ts,tsx}",
    "./node_modules/@babaandco/kit/dist/**/*.{js,jsx}",
  ],
};

Plain CSS Apps

// app/layout.tsx or app entrypoint
import "@babaandco/kit/styles/internal-tool.css";

React Primitives

import { Button, Card } from "@babaandco/kit/primitives";
import { AppCrumb } from "@babaandco/kit/patterns";

Icons

Each app should keep its local app/icon.tsx and app/apple-icon.tsx, but the artwork should come from Baba Kit:

import { ImageResponse } from "next/og";
import { BabaToolIconImage } from "@babaandco/kit/next";

export const size = { width: 64, height: 64 };
export const contentType = "image/png";

export default function Icon() {
  return new ImageResponse(<BabaToolIconImage glyph="MD" />, size);
}

Releases

Baba Kit uses Changesets for versioning and npm publishing. See docs/releasing.md.