Source: https://monarchui.dev/introduction/

Foundations

# Introduction

Monarch is an open-source design system for startups, enterprise teams, independent designers and developers: anyone who wants their product to feel calm, clear and finished. It gives you design tokens, accessible React components and a conformance CLI that keeps every screen consistent as you grow, with no live service to depend on. It is free under the MIT License.

Get started

View the source

## Packages

| Package | What it is | Needs |
| --- | --- | --- |
| `@rookcom/monarch-tokens` | CSS variables, light, dark and high-contrast themes, per-product accents with checked contrast, a Tailwind 3 preset and tokens.json. | Nothing |
| `@rookcom/monarch-react` | Accessible, typed React components and patterns (React 18 and 19, server-rendering safe) and styles.css. | Tokens, React |
| `@rookcom/monarch-conformance` | The monarch CLI: design-conformance checks, SARIF output and registry verification. | Node only |

```tsx
npm i @rookcom/monarch-tokens @rookcom/monarch-react
```

## In this release

Components

102

Patterns

19

Live examples

295

Themes

4

Counted from the docs files of `@rookcom/monarch-react` 0.5.1 and the tokens package.

## How it fits together

1. **Tokens** define every colour, size and motion value as a CSS variable, for each theme and product accent.
2. **Components** use only those variables, so a theme or accent change reaches every control without new code.
3. **Conformance** scans a product's code for raw colours, off-grid spacing and local copies of Monarch components, and reports counts.

Next: [Colours](https://monarchui.dev/colours/), [Theming](https://monarchui.dev/theming/) or the [component overview](https://monarchui.dev/components/).