Install - React

The React components are dependency-free (no UI library required) and styled by the shared ADEK stylesheet. Setup is three steps.

1. Font

The design system uses Montserrat (weights 400 / 500 / 600 / 700). Load it from Google Fonts or your internal font server.

# 1. Add the Montserrat font (index.html or your document head)
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet" />

2. Styles

All colors, radii, spacing, and shadows are CSS custom properties in tokens.css; component classes live in adek.css.

/* 2. Import the design tokens + component styles once, globally */
import "adek-ui/styles/tokens.css";
import "adek-ui/styles/adek.css";

/* Until the package is published internally, copy
   styles/tokens.css and styles/adek.css from this site's repository
   (adek-design-system/styles/) into your project and import them. */

3. Components

Copy the component you need from its page - each file is self-contained TypeScript.

// 3. Copy any component from the Components section, e.g.:
import { Button } from "./components/Button";

export function Example() {
  return (
    <Button hierarchy="primary" size="md">
      Button CTA
    </Button>
  );
}