# Monarch

> Monarch is an open-source design system: accessible React components, design tokens, light, dark and high-contrast themes, and your own brand colour. Free under the MIT License.

Monarch has 102 components and 19 patterns, 4 themes, and 295 live examples. Install it with `npm i @rookcom/monarch-tokens @rookcom/monarch-react`. It is MIT licensed and made by [Rook](https://rookhq.com). Every page has a Markdown copy at the same address ending in `index.md`, or ask for `Accept: text/markdown`.

## Packages

- [@rookcom/monarch-tokens](https://www.npmjs.com/package/@rookcom/monarch-tokens): Design tokens: colour, type, spacing, radius, elevation, motion; CSS variables and JSON.
- [@rookcom/monarch-react](https://www.npmjs.com/package/@rookcom/monarch-react): Accessible React components and patterns, plus the shell and editor subpaths.
- [@rookcom/monarch-conformance](https://www.npmjs.com/package/@rookcom/monarch-conformance): Checks that an app follows the system.

## Foundations

- [Introduction](https://monarchui.dev/introduction/index.md): What Monarch is, its packages and how they fit together.
- [Colours](https://monarchui.dev/colours/index.md): Brand colours and semantic colour tokens, with live contrast ratios.
- [Typography](https://monarchui.dev/typography/index.md): Type scale, display sizes and weights.
- [Tokens](https://monarchui.dev/tokens/index.md): Spacing, radius, elevation and motion tokens.
- [Theming](https://monarchui.dev/theming/index.md): Light, dark and high contrast themes, and product accents.

## Guides

- [Getting started](https://monarchui.dev/getting-started/index.md): Install the packages, load the styles and apply the theme.
- [Migration](https://monarchui.dev/migration/index.md): Moving an existing app onto Monarch.
- [Conformance](https://monarchui.dev/conformance/index.md): The monarch CLI: design-conformance checks for your codebase.
- [Products](https://monarchui.dev/products/index.md): The Rook products registered with Monarch and their accents.
- [Governance](https://monarchui.dev/governance/index.md): How Monarch changes: versioning, deprecation, exceptions.

## Components

- [Accordion](https://monarchui.dev/components/accordion/index.md): Stacked sections whose bodies expand and collapse under heading triggers.
- [ActivityTimeline](https://monarchui.dev/components/activity-timeline/index.md): Vertical feed of events: actor, verb, object, time and marker, grouped by day, with expandable details and filters.
- [AgendaList](https://monarchui.dev/components/agenda-list/index.md): Events grouped by day with sticky day headings, a Today marker and an empty state.
- [Alert](https://monarchui.dev/components/alert/index.md): Inline message about a page or section.
- [AssigneePicker](https://monarchui.dev/components/assignee-picker/index.md): People picker with avatars, "you" first, Unassigned, Assign to me and an avatar stack.
- [Avatar](https://monarchui.dev/components/avatar/index.md): Person or entity image with an initials and icon fallback, presence status and stacked groups.
- [BackLink](https://monarchui.dev/components/back-link/index.md): A link to the parent page with a leading back arrow; works with any router.
- [Badge](https://monarchui.dev/components/badge/index.md): Status and metadata labels in six tones.
- [BarChart](https://monarchui.dev/components/bar-chart/index.md): Vertical and horizontal bar charts, grouped or stacked, with value labels, highlight, reference lines, keyboard tooltips, drill-in and a data table.
- [BarList](https://monarchui.dev/components/bar-list/index.md): A ranked list with an inline bar per row: top pages, referrers, rivals by score.
- [Breadcrumb](https://monarchui.dev/components/breadcrumb/index.md): Location trail with the current page last and long trails collapsed into a menu.
- [BulkActionBar](https://monarchui.dev/components/bulk-action-bar/index.md): Toolbar shown while items are selected: count, actions with an overflow menu, clear selection and a polite announcement.
- [Button](https://monarchui.dev/components/button/index.md): Primary, secondary, ghost and danger actions; loading and icon-only forms.
- [CalendarMonthView](https://monarchui.dev/components/calendar-month-view/index.md): A month grid of days with events, "+N more" popovers and arrow-key movement.
- [CalloutBanner](https://monarchui.dev/components/callout-banner/index.md): Page- or section-level banner: trials, maintenance, billing, failed syncs and narrowed scopes.
- [Card](https://monarchui.dev/components/card/index.md): Grouped content surface.
- [ChartFrame](https://monarchui.dev/components/chart-frame/index.md): The container every chart sits in: title, controls, legend, loading / empty / error states and an accessible data table.
- [Checkbox](https://monarchui.dev/components/checkbox/index.md): Binary or indeterminate choice with inline label.
- [Combobox](https://monarchui.dev/components/combobox/index.md): Searchable single or multiple select with groups, async search, a create option and an inline mode.
- [CommandPalette](https://monarchui.dev/components/command-palette/index.md): A ⌘K / Ctrl+K palette: grouped commands, recent items, async search, nested pages and shortcut hints.
- [ConfirmDialog](https://monarchui.dev/components/confirm-dialog/index.md): Confirmation for consequential actions: danger tone, type-to-confirm, reason, async pending and error.
- [CopyButton](https://monarchui.dev/components/copy-button/index.md): Copies a value to the clipboard, confirms it visibly and to screen readers, and reports failures.
- [CopyField](https://monarchui.dev/components/copy-field/index.md): A read-only value with a copy button: links, records, keys and snippets.
- [DataTable](https://monarchui.dev/components/data-table/index.md): Column-driven data table with sorting, selection, column controls, pagination, states and keyboard grid navigation; plus the Table parts it is built on.
- [DatePicker](https://monarchui.dev/components/date-picker/index.md): A date field: type in the locale’s format or pick from a calendar popover, with presets, min/max and Field errors.
- [DateRangePicker](https://monarchui.dev/components/date-range-picker/index.md): Start and end dates: typed or picked on a one- or two-month calendar with a live preview, presets and length limits.
- [DateTimePicker](https://monarchui.dev/components/date-time-picker/index.md): A date and a wall-clock time in one field: DatePicker plus a typed 12- or 24-hour time, a step and a time-zone slot.
- [DeltaIndicator](https://monarchui.dev/components/delta-indicator/index.md): An up, down or flat change with sign, arrow and a spoken sentence; colour follows which direction is better.
- [DescriptionList](https://monarchui.dev/components/description-list/index.md): Key/value facts on detail pages, with copyable values, empty placeholders and clamped long values.
- [Dialog](https://monarchui.dev/components/dialog/index.md): Modal with focus trap, Escape and focus return.
- [DonutChart](https://monarchui.dev/components/donut-chart/index.md): Parts of one whole as a donut in ChartFrame: total in the middle, a legend of values and shares, and a data table.
- [DropdownMenu](https://monarchui.dev/components/dropdown-menu/index.md): Action menu with checkbox, radio and nested items.
- [DurationInput](https://monarchui.dev/components/duration-input/index.md): Free-text duration field ("1h 30m", "90m", "1.5h") with a minutes value and arrow-key steps.
- [EmptyState](https://monarchui.dev/components/empty-state/index.md): What will appear here, and the action that creates it.
- [EntityPicker](https://monarchui.dev/components/entity-picker/index.md): Pick one or several records (projects, contacts, teams) from a searchable list in a popover.
- [ErrorPage](https://monarchui.dev/components/error-page/index.md): A whole page failed: not found, forbidden, server error, offline or maintenance.
- [ErrorState](https://monarchui.dev/components/error-state/index.md): A region failed to load: what failed, why in plain words, and a retry.
- [EventChip](https://monarchui.dev/components/event-chip/index.md): One event in a calendar view: colour, title, time and status, as a button or link.
- [Field](https://monarchui.dev/components/form-field/index.md): Label, control, help and error wired together with the right ARIA.
- [FileUpload](https://monarchui.dev/components/file-upload/index.md): A drop zone and browse button that checks type, size and count, explains refusals and hands files to the product.
- [InlineEditText](https://monarchui.dev/components/inline-edit-text/index.md): Text that edits in place: async save, pending and error states, validation.
- [InlineErrorRetry](https://monarchui.dev/components/inline-error-retry/index.md): A compact "this part didn’t load" row with Try again.
- [InlineNotice](https://monarchui.dev/components/inline-notice/index.md): A one-line tone message attached to a field, row, card or panel.
- [Input](https://monarchui.dev/components/text-field/index.md): Text entry at three sizes, with invalid and disabled states.
- [KanbanBoard](https://monarchui.dev/components/kanban-board/index.md): Columns of cards moved by drag (mouse, pen, touch) or keyboard, with counts, WIP limits, collapse and optimistic moves.
- [Kbd](https://monarchui.dev/components/kbd/index.md): Keyboard shortcut hint.
- [LineChart](https://monarchui.dev/components/line-chart/index.md): Line and area charts for trends: multiple series, gaps, reference lines, crosshair tooltip on hover, touch and keyboard, legend toggles and a data table.
- [Link](https://monarchui.dev/components/link/index.md): Text link with inline, standalone and subtle styles and safe new-tab handling.
- [LinkedDocsPanel](https://monarchui.dev/components/linked-docs-panel/index.md): Docs and links attached to a record: list, open, unlink, link a doc, add a link, filter by Space.
- [LoadingState](https://monarchui.dev/components/loading-state/index.md): A region is loading: a layout-shaped skeleton or a labelled spinner, announced once.
- [LoadMore](https://monarchui.dev/components/load-more/index.md): Cursor pagination footer with loading, error and retry, end of list and announcements.
- [LocationFields](https://monarchui.dev/components/location-fields/index.md): Country, region, city and postal code as one composite, with the data source injected.
- [MemberRow](https://monarchui.dev/components/member-row/index.md): One member of a workspace or space: avatar, name, email, role, status (invited, active, suspended) and confirmed actions.
- [MentionPicker](https://monarchui.dev/components/mention-picker/index.md): @mention suggestions anchored to the caret, with async search, people and channel groups and listbox keys.
- [MessageComposer](https://monarchui.dev/components/message-composer/index.md): The chat and ticket reply box: rich text with Enter to send, attachments, emoji and action slots, drafts, edit and reply modes, and a product mode switch.
- [MessageRow](https://monarchui.dev/components/message-row/index.md): One message: avatar, author, time and body, with edited, pending and failed states, reactions, replies and actions.
- [MiniMonth](https://monarchui.dev/components/mini-month/index.md): A keyboard-navigable month grid (APG date-picker grid) with min/max, disabled days, week numbers and event dots.
- [Money](https://monarchui.dev/components/money/index.md): An amount of one currency, formatted by Intl.NumberFormat in tabular figures.
- [NoAppAccess](https://monarchui.dev/components/no-app-access/index.md): The “you don’t have access to this app” screen: who can fix it, request access, contact an admin and switch workspace.
- [NotificationCenter](https://monarchui.dev/components/notification-center/index.md): Bell with an unread count and a panel: All and Unread tabs, day groups, mark read, load more and an empty state.
- [OnboardingChecklist](https://monarchui.dev/components/onboarding-checklist/index.md): A first-run checklist with done steps, a progress summary, per-step actions, collapse and dismiss.
- [OTPPinInput](https://monarchui.dev/components/otp-pin-input/index.md): One-time code or PIN entry in separate boxes, backed by one accessible input.
- [Pagination](https://monarchui.dev/components/pagination/index.md): Numbered or compact page navigation for long lists.
- [Popover](https://monarchui.dev/components/popover/index.md): Non-modal floating panel.
- [Progress](https://monarchui.dev/components/progress-bar/index.md): Linear progress, quota meters and stacked segments.
- [RelativeTime](https://monarchui.dev/components/relative-time/index.md): A localised "3 hours ago" in a <time> element, with the absolute time on hover and focus.
- [ReorderableList](https://monarchui.dev/components/reorderable-list/index.md): A list reordered by dragging a handle (mouse, pen, touch) or fully from the keyboard, with every step announced.
- [ResponsiveDialog](https://monarchui.dev/components/responsive-dialog/index.md): A Dialog on wide screens and a bottom sheet on phones, switched in CSS.
- [RichTextEditor](https://monarchui.dev/components/rich-text-editor/index.md): A Tiptap rich-text editor: accessible toolbar, Markdown shortcuts, safe paste, links, checklists, mentions, uploads and a character limit.
- [SavedViews](https://monarchui.dev/components/saved-views/index.md): View switcher for a list: named combinations of filters, sort and columns, with save, save as new, rename, delete, set default and an "Edited" marker.
- [SchemaDrivenForm](https://monarchui.dev/components/schema-driven-form/index.md): A form rendered from a field schema: seven field types, required and validation rules, sections and conditional fields.
- [SearchInput](https://monarchui.dev/components/search-input/index.md): Search box with icon, clear button, debounce, pending state and shortcut hint.
- [SecretField](https://monarchui.dev/components/secret-field/index.md): A masked secret with reveal and hide, optional copy, and a "set, not shown" state.
- [SectionCard](https://monarchui.dev/components/section-card/index.md): A titled card for one section: header with actions and "View all", body, footer, and built-in loading, empty and error states.
- [SectionHeader](https://monarchui.dev/components/section-header/index.md): Unboxed section title with description, meta, actions, a trailing link and busy state.
- [SegmentedControl](https://monarchui.dev/components/segmented-control/index.md): Single choice as a radio group with arrow keys; ToggleGroup for several on/off choices.
- [Select](https://monarchui.dev/components/select/index.md): Single-value picker with typeahead and keyboard navigation.
- [Separator](https://monarchui.dev/components/separator/index.md): Horizontal or vertical divider.
- [Sheet](https://monarchui.dev/components/sheet/index.md): Side or bottom panel with focus trap, scroll lock, sizes and safe areas.
- [Skeleton](https://monarchui.dev/components/skeleton/index.md): Loading placeholder shapes.
- [SpaceSwitcher](https://monarchui.dev/components/space-switcher/index.md): Pick "All spaces" or one Space of the workspace, with search, New and Manage links.
- [Sparkline](https://monarchui.dev/components/sparkline/index.md): A word-sized trend line, area or sparkbar for tables, stat cards and lists, with gaps, invert, thresholds and a text alternative.
- [Spinner](https://monarchui.dev/components/spinner/index.md): Indeterminate progress.
- [StackedProportionBar](https://monarchui.dev/components/stacked-proportion-bar/index.md): One horizontal bar split into proportions, with a legend of values and shares as a real list.
- [StatCard](https://monarchui.dev/components/stat-card/index.md): A KPI tile: label, formatted value, change versus a period, hint, help, sparkline and drill-down.
- [StatusBadge](https://monarchui.dev/components/status-badge/index.md): Typed status registry: label, tone and a distinct icon or dot, so colour is never the only signal.
- [Stepper](https://monarchui.dev/components/stepper/index.md): Multi-step progress for wizards and onboarding: horizontal or vertical, current, complete, error and optional steps.
- [Switch](https://monarchui.dev/components/switch/index.md): Immediate on/off setting.
- [SwitchSettingsList](https://monarchui.dev/components/switch-settings-list/index.md): On/off settings that each save on their own, with saving, error and retry per row.
- [Tabs](https://monarchui.dev/components/tabs/index.md): Line and pill tab sets, link tabs, filter tabs, counts and scrolling lists.
- [TagInput](https://monarchui.dev/components/tag-input/index.md): Chips for a list of short values: Enter or comma to add, paste to split, keys to remove.
- [TemplatePicker](https://monarchui.dev/components/template-picker/index.md): Choose a template from a gallery: category filters, search, thumbnails, a blank option, a preview pane and arrow-key grid navigation.
- [ThemeToggle](https://monarchui.dev/components/theme-toggle/index.md): Light, dark or system theme, saved in the shared rook_theme cookie and applied like the pre-paint script.
- [TimeGrid](https://monarchui.dev/components/time-grid/index.md): Day and week view: hours, an all-day row, overlap layout, now line, working hours and slots.
- [TimezoneSelect](https://monarchui.dev/components/timezone-select/index.md): Searchable IANA time zone picker labelled by UTC offset and city, with detected and pinned zones.
- [Toast](https://monarchui.dev/components/toast/index.md): Transient notifications from useToast(), rendered by ToastProvider.
- [Tooltip](https://monarchui.dev/components/tooltip/index.md): Supplementary text on hover and focus.
- [UploadQueue](https://monarchui.dev/components/upload-queue/index.md): The list of uploads in flight: progress, status, cancel, retry, remove and a total summary.
- [UsernameAvailabilityInput](https://monarchui.dev/components/username-availability-input/index.md): Input with an injected, debounced async check, a status icon and an announced result.
- [VisuallyHidden](https://monarchui.dev/components/visually-hidden/index.md): Screen-reader-only text.
- [WeeklyHoursEditor](https://monarchui.dev/components/weekly-hours-editor/index.md): Edits weekly availability: days on or off, several intervals a day, copy and overlap checks.
- [WorkspaceSwitcher](https://monarchui.dev/components/workspace-switcher/index.md): Switch between the workspaces a person belongs to, with search and Create workspace.

## Patterns

- [AppShell](https://monarchui.dev/components/app-shell/index.md): The signed-in Rook layout: rail, optional identity bar and main, with a skip link and contained scrolling.
- [AuditLogViewer](https://monarchui.dev/components/audit-log-viewer/index.md): Security and audit events in a table: actor, action, target, IP and device, a details drawer, filters, export and paging.
- [ChatDock](https://monarchui.dev/components/chat-dock/index.md): The Rook Chat launcher with an unread badge and the panel that holds Rook Chat in an iframe (rook-chat-embed v1).
- [CustomDomainConnect](https://monarchui.dev/components/custom-domain-connect/index.md): Connect a custom domain: enter it, copy the DNS records, verify, and see pending, verifying, active or failed.
- [EmbeddedAppFrame](https://monarchui.dev/components/embedded-app-frame/index.md): Embed a page of another Rook app: sandboxed iframe, ready handshake, auto-height and focus handoff with origin checks.
- [FilterBar](https://monarchui.dev/components/filter-bar/index.md): Filter row: search, removable, editable or toggle FilterChips, an "Add filter" menu, "Clear all", a result count and trailing controls.
- [IdentityBar](https://monarchui.dev/components/identity-bar/index.md): The top bar of a Rook app: product name, search, notifications and the account menu.
- [Marketing sections](https://monarchui.dev/components/marketing-section-blocks/index.md): MarketingSection, MarketingSectionHeader, FeatureGrid, ProductFrame, StatStrip, CTABand and FAQ: the body of a public page.
- [MarketingHero](https://monarchui.dev/components/marketing-hero/index.md): The opening section of a public page: eyebrow, the page h1, lead, actions and media.
- [MessageTimeline](https://monarchui.dev/components/message-timeline/index.md): Scrolling conversation: day separators, a “New messages” divider, older history on scroll-up and stick-to-bottom.
- [PageHeader](https://monarchui.dev/components/page-header/index.md): Top of a main view: the single h1, back link or breadcrumbs, status, details, page actions with overflow, and tabs.
- [RecordHeader](https://monarchui.dev/components/record-header/index.md): The header of a record detail page: avatar, editable title, status, key facts, actions, prev/next, state banner and tabs.
- [RookRail](https://monarchui.dev/components/rook-rail/index.md): The shared Rook navigation rail: 48px icons that expand to labels, remembered across apps, with a drawer on phones.
- [SettingsSection](https://monarchui.dev/components/settings-section/index.md): Titled card of settings rows with a save footer and dirty state, loading and no-access states, and a danger-zone variant.
- [SiteHeader and SiteFooter](https://monarchui.dev/components/marketing-site-shell/index.md): The frame of a public page: wordmark, navigation with disclosure panels, actions, and a footer of link columns.
- [SplitInboxLayout](https://monarchui.dev/components/split-inbox-layout/index.md): The one-page inbox: list, detail and context panes, resizable and collapsible, single-pane with back navigation on phones.
- [SplitLayout](https://monarchui.dev/components/split-layout/index.md): List and detail panes side by side, one pane at a time on narrow screens.
- [SupportPanel](https://monarchui.dev/components/support-panel/index.md): The rail’s Help & support panel: in-app support chat, help articles, contact options and the status page.
- [Toolbar](https://monarchui.dev/components/toolbar/index.md): Search, controls and trailing actions above a list, with arrow-key focus movement.

## Optional

- [Full documentation in one file](https://monarchui.dev/llms-full.txt): every page below, as Markdown
- [Source code on GitHub](https://github.com/RookHQ/monarch)
- [Sitemap](https://monarchui.dev/sitemap.xml)