- Tokens
- Components
- 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
Semantic roles for surfaces, text and states, with contrast you can see.
Typography
A steady scale for interfaces, a fluid one for headlines.
Tokens
Spacing on a 4px grid, with radius, elevation and motion.
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.
Button
Primary, secondary, ghost and danger actions; loading and icon-only forms.
SegmentedControl
Single choice as a radio group with arrow keys; ToggleGroup for several on/off choices.
Tabs
Line and pill tab sets, link tabs, filter tabs, counts and scrolling lists.
StatusBadge
Typed status registry: label, tone and a distinct icon or dot, so colour is never the only signal.
Progress
Linear progress, quota meters and stacked segments.
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.
Made by Rook. 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.