Source: https://monarchui.dev/

Monarch

# Meet Monarch.An open-source design system for everyone who builds.

Get started

GitHub

1. Tokens
3. Components
5. Experiences

Showcase

## Made of the real thing

These are live Monarch components, exactly as you would use them. Type in the form. Flip a switch. Hover the chart.

Foundations

## A quiet foundation

Colour, type, spacing, radius, elevation and motion live in one set of tokens. Components use nothing else, so a single change reaches the whole product.

- [Colours](https://monarchui.dev/colours/)Semantic roles for surfaces, text and states, with contrast you can see.
- [Typography](https://monarchui.dev/typography/)A steady scale for interfaces, a fluid one for headlines.
- [Tokens](https://monarchui.dev/tokens/)Spacing on a 4px grid, with radius, elevation and motion.
- [Theming](https://monarchui.dev/theming/)Light, dark and high contrast, in your own colour.

Components

## Ready when you are

102 components and 19 patterns, from buttons and forms to charts, data tables, scheduling, collaboration, an editor and marketing blocks. 295 live examples, documented from the code itself.

Browse all

- [Button](https://monarchui.dev/components/button/)Primary, secondary, ghost and danger actions; loading and icon-only forms.
- [SegmentedControl](https://monarchui.dev/components/segmented-control/)Single choice as a radio group with arrow keys; ToggleGroup for several on/off choices.
- [Tabs](https://monarchui.dev/components/tabs/)Line and pill tab sets, link tabs, filter tabs, counts and scrolling lists.
- [StatusBadge](https://monarchui.dev/components/status-badge/)Typed status registry: label, tone and a distinct icon or dot, so colour is never the only signal.
- [Progress](https://monarchui.dev/components/progress-bar/)Linear progress, quota meters and stacked segments.
- [Avatar](https://monarchui.dev/components/avatar/)Person or entity image with an initials and icon fallback, presence status and stacked groups.

Accessibility and theming

## Your colour. Always readable.

Bring one brand colour and deriveTheme builds the palette, adjusted until text, focus rings and states meet WCAG 2.2 AA contrast in light, dark and high contrast. Try it: these controls change this whole site.

Theme

More contrast

Accent

New

## Made by [Rook](https://rookhq.com/). Open to everyone.

Monarch is free under the MIT License, for a weekend project or a company-wide platform. Read the code, open an issue, or help shape what comes next.

View on GitHub

How to contribute