Introduction

Overview of the Banhatten Design System: packages, tech stack, and what you get.

Banhatten Design System is a React component library and design tokens published on npm as banhatten-ui. The source lives in an npm workspaces monorepo. It is built for React 19+ (Server Components compatible), TypeScript (strict mode), and Tailwind CSS v4.

Packages

Install from npm: banhatten-ui. The monorepo contains the package source and this docs app.

  • banhatten-ui (npm) — The published package. Component library (buttons, inputs, menus, sidebars, avatars, alerts, sliders, tooltips, and more), design tokens (JSON + Tailwind preset), and cn utility. Exports named components and CVA variants (e.g. buttonVariants). Tokens and Tailwind config are included: banhatten-ui/tokens, banhatten-ui/tokens/tailwind.config.
  • Monorepo — packages/ui (banhatten-ui source), packages/tokens (@banhatten/tokens, used in development), apps/docs (this documentation site).

Tech stack

Technologies and conventions used across the design system.

  • Framework: React 19+ (Server Components compatible).
  • Language: TypeScript (strict mode).
  • Styling: Tailwind CSS v4 (utility-first) and class-variance-authority (CVA) for component variants.
  • Icons: Material Symbols (variable font via the material-symbols npm package).
  • Conventions: Functional components only; forwardRef where needed; props extend standard HTML attributes; named exports; cn(...) for class merging (Tailwind Merge + CLSX); accessibility (ARIA) required on interactive elements.

What you get

Capabilities provided by the design system.

  • Design tokens for colors, spacing, radius, and shadows.
  • A full set of UI components: buttons, inputs, textareas, checkboxes, radios, toggles, tags, badges, avatars, menus, sidebars, alerts, accordions, sliders, progress bars, tooltips, dividers, and more.
  • Consistent API: variants and sizes via props; optional icons (Material Symbols); support for labels, helper text, and error states where applicable.
  • Accessibility built in: ARIA attributes, keyboard support, and semantic HTML.