Source: https://monarchui.dev/components/

Components

# Components

121 components and patterns in `@rookcom/monarch-react` 0.5.1. Each page is generated from the component's docs file and its TypeScript declarations.

## Layout12

- [AppShell](https://monarchui.dev/components/app-shell/)The signed-in Rook layout: rail, optional identity bar and main, with a skip link and contained scrolling.
- [Marketing sections](https://monarchui.dev/components/marketing-section-blocks/)MarketingSection, MarketingSectionHeader, FeatureGrid, ProductFrame, StatStrip, CTABand and FAQ: the body of a public page.
- [MarketingHero](https://monarchui.dev/components/marketing-hero/)The opening section of a public page: eyebrow, the page h1, lead, actions and media.
- [PageHeader](https://monarchui.dev/components/page-header/)Top of a main view: the single h1, back link or breadcrumbs, status, details, page actions with overflow, and tabs.
- [SectionCard](https://monarchui.dev/components/section-card/)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/)Unboxed section title with description, meta, actions, a trailing link and busy state.
- [Separator](https://monarchui.dev/components/separator/)Horizontal or vertical divider.
- [SettingsSection](https://monarchui.dev/components/settings-section/)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/)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/)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/)List and detail panes side by side, one pane at a time on narrow screens.
- [VisuallyHidden](https://monarchui.dev/components/visually-hidden/)Screen-reader-only text.

## Typography1

- [Kbd](https://monarchui.dev/components/kbd/)Keyboard shortcut hint.

## Actions4

- [Button](https://monarchui.dev/components/button/)Primary, secondary, ghost and danger actions; loading and icon-only forms.
- [CopyButton](https://monarchui.dev/components/copy-button/)Copies a value to the clipboard, confirms it visibly and to screen readers, and reports failures.
- [CopyField](https://monarchui.dev/components/copy-field/)A read-only value with a copy button: links, records, keys and snippets.
- [Toolbar](https://monarchui.dev/components/toolbar/)Search, controls and trailing actions above a list, with arrow-key focus movement.

## Forms15

- [Checkbox](https://monarchui.dev/components/checkbox/)Binary or indeterminate choice with inline label.
- [Combobox](https://monarchui.dev/components/combobox/)Searchable single or multiple select with groups, async search, a create option and an inline mode.
- [DurationInput](https://monarchui.dev/components/duration-input/)Free-text duration field ("1h 30m", "90m", "1.5h") with a minutes value and arrow-key steps.
- [EntityPicker](https://monarchui.dev/components/entity-picker/)Pick one or several records (projects, contacts, teams) from a searchable list in a popover.
- [Field](https://monarchui.dev/components/form-field/)Label, control, help and error wired together with the right ARIA.
- [InlineEditText](https://monarchui.dev/components/inline-edit-text/)Text that edits in place: async save, pending and error states, validation.
- [Input](https://monarchui.dev/components/text-field/)Text entry at three sizes, with invalid and disabled states.
- [OTPPinInput](https://monarchui.dev/components/otp-pin-input/)One-time code or PIN entry in separate boxes, backed by one accessible input.
- [SchemaDrivenForm](https://monarchui.dev/components/schema-driven-form/)A form rendered from a field schema: seven field types, required and validation rules, sections and conditional fields.
- [SegmentedControl](https://monarchui.dev/components/segmented-control/)Single choice as a radio group with arrow keys; ToggleGroup for several on/off choices.
- [Select](https://monarchui.dev/components/select/)Single-value picker with typeahead and keyboard navigation.
- [Switch](https://monarchui.dev/components/switch/)Immediate on/off setting.
- [SwitchSettingsList](https://monarchui.dev/components/switch-settings-list/)On/off settings that each save on their own, with saving, error and retry per row.
- [TagInput](https://monarchui.dev/components/tag-input/)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/)Choose a template from a gallery: category filters, search, thumbnails, a blank option, a preview pane and arrow-key grid navigation.

## Navigation7

- [BackLink](https://monarchui.dev/components/back-link/)A link to the parent page with a leading back arrow; works with any router.
- [Breadcrumb](https://monarchui.dev/components/breadcrumb/)Location trail with the current page last and long trails collapsed into a menu.
- [IdentityBar](https://monarchui.dev/components/identity-bar/)The top bar of a Rook app: product name, search, notifications and the account menu.
- [Link](https://monarchui.dev/components/link/)Text link with inline, standalone and subtle styles and safe new-tab handling.
- [Pagination](https://monarchui.dev/components/pagination/)Numbered or compact page navigation for long lists.
- [RookRail](https://monarchui.dev/components/rook-rail/)The shared Rook navigation rail: 48px icons that expand to labels, remembered across apps, with a drawer on phones.
- [Tabs](https://monarchui.dev/components/tabs/)Line and pill tab sets, link tabs, filter tabs, counts and scrolling lists.

## Data display8

- [Accordion](https://monarchui.dev/components/accordion/)Stacked sections whose bodies expand and collapse under heading triggers.
- [Badge](https://monarchui.dev/components/badge/)Status and metadata labels in six tones.
- [Card](https://monarchui.dev/components/card/)Grouped content surface.
- [DescriptionList](https://monarchui.dev/components/description-list/)Key/value facts on detail pages, with copyable values, empty placeholders and clamped long values.
- [Progress](https://monarchui.dev/components/progress-bar/)Linear progress, quota meters and stacked segments.
- [RelativeTime](https://monarchui.dev/components/relative-time/)A localised "3 hours ago" in a <time> element, with the absolute time on hover and focus.
- [StatCard](https://monarchui.dev/components/stat-card/)A KPI tile: label, formatted value, change versus a period, hint, help, sparkline and drill-down.
- [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.

## Tables and data grid3

- [BulkActionBar](https://monarchui.dev/components/bulk-action-bar/)Toolbar shown while items are selected: count, actions with an overflow menu, clear selection and a polite announcement.
- [DataTable](https://monarchui.dev/components/data-table/)Column-driven data table with sorting, selection, column controls, pagination, states and keyboard grid navigation; plus the Table parts it is built on.
- [LoadMore](https://monarchui.dev/components/load-more/)Cursor pagination footer with loading, error and retry, end of list and announcements.

## Status and feedback11

- [Alert](https://monarchui.dev/components/alert/)Inline message about a page or section.
- [CalloutBanner](https://monarchui.dev/components/callout-banner/)Page- or section-level banner: trials, maintenance, billing, failed syncs and narrowed scopes.
- [EmptyState](https://monarchui.dev/components/empty-state/)What will appear here, and the action that creates it.
- [ErrorPage](https://monarchui.dev/components/error-page/)A whole page failed: not found, forbidden, server error, offline or maintenance.
- [ErrorState](https://monarchui.dev/components/error-state/)A region failed to load: what failed, why in plain words, and a retry.
- [InlineErrorRetry](https://monarchui.dev/components/inline-error-retry/)A compact "this part didn’t load" row with Try again.
- [InlineNotice](https://monarchui.dev/components/inline-notice/)A one-line tone message attached to a field, row, card or panel.
- [LoadingState](https://monarchui.dev/components/loading-state/)A region is loading: a layout-shaped skeleton or a labelled spinner, announced once.
- [Skeleton](https://monarchui.dev/components/skeleton/)Loading placeholder shapes.
- [Spinner](https://monarchui.dev/components/spinner/)Indeterminate progress.
- [Toast](https://monarchui.dev/components/toast/)Transient notifications from useToast(), rendered by ToastProvider.

## Overlays8

- [ConfirmDialog](https://monarchui.dev/components/confirm-dialog/)Confirmation for consequential actions: danger tone, type-to-confirm, reason, async pending and error.
- [Dialog](https://monarchui.dev/components/dialog/)Modal with focus trap, Escape and focus return.
- [DropdownMenu](https://monarchui.dev/components/dropdown-menu/)Action menu with checkbox, radio and nested items.
- [Popover](https://monarchui.dev/components/popover/)Non-modal floating panel.
- [ResponsiveDialog](https://monarchui.dev/components/responsive-dialog/)A Dialog on wide screens and a bottom sheet on phones, switched in CSS.
- [Sheet](https://monarchui.dev/components/sheet/)Side or bottom panel with focus trap, scroll lock, sizes and safe areas.
- [SupportPanel](https://monarchui.dev/components/support-panel/)The rail’s Help & support panel: in-app support chat, help articles, contact options and the status page.
- [Tooltip](https://monarchui.dev/components/tooltip/)Supplementary text on hover and focus.

## Date, time and scheduling9

- [AgendaList](https://monarchui.dev/components/agenda-list/)Events grouped by day with sticky day headings, a Today marker and an empty state.
- [CalendarMonthView](https://monarchui.dev/components/calendar-month-view/)A month grid of days with events, "+N more" popovers and arrow-key movement.
- [DatePicker](https://monarchui.dev/components/date-picker/)A date field: type in the locale’s format or pick from a calendar popover, with presets, min/max and Field errors.
- [DateTimePicker](https://monarchui.dev/components/date-time-picker/)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.
- [EventChip](https://monarchui.dev/components/event-chip/)One event in a calendar view: colour, title, time and status, as a button or link.
- [MiniMonth](https://monarchui.dev/components/mini-month/)A keyboard-navigable month grid (APG date-picker grid) with min/max, disabled days, week numbers and event dots.
- [TimeGrid](https://monarchui.dev/components/time-grid/)Day and week view: hours, an all-day row, overlap layout, now line, working hours and slots.
- [TimezoneSelect](https://monarchui.dev/components/timezone-select/)Searchable IANA time zone picker labelled by UTC offset and city, with detected and pinned zones.
- [WeeklyHoursEditor](https://monarchui.dev/components/weekly-hours-editor/)Edits weekly availability: days on or off, several intervals a day, copy and overlap checks.

## Charts8

- [BarChart](https://monarchui.dev/components/bar-chart/)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/)A ranked list with an inline bar per row: top pages, referrers, rivals by score.
- [ChartFrame](https://monarchui.dev/components/chart-frame/)The container every chart sits in: title, controls, legend, loading / empty / error states and an accessible data table.
- [DeltaIndicator](https://monarchui.dev/components/delta-indicator/)An up, down or flat change with sign, arrow and a spoken sentence; colour follows which direction is better.
- [DonutChart](https://monarchui.dev/components/donut-chart/)Parts of one whole as a donut in ChartFrame: total in the middle, a legend of values and shares, and a data table.
- [LineChart](https://monarchui.dev/components/line-chart/)Line and area charts for trends: multiple series, gaps, reference lines, crosshair tooltip on hover, touch and keyboard, legend toggles and a data table.
- [Sparkline](https://monarchui.dev/components/sparkline/)A word-sized trend line, area or sparkbar for tables, stat cards and lists, with gaps, invert, thresholds and a text alternative.
- [StackedProportionBar](https://monarchui.dev/components/stacked-proportion-bar/)One horizontal bar split into proportions, with a legend of values and shares as a real list.

## Files2

- [FileUpload](https://monarchui.dev/components/file-upload/)A drop zone and browse button that checks type, size and count, explains refusals and hands files to the product.
- [UploadQueue](https://monarchui.dev/components/upload-queue/)The list of uploads in flight: progress, status, cancel, retry, remove and a total summary.

## Search and discovery5

- [CommandPalette](https://monarchui.dev/components/command-palette/)A ⌘K / Ctrl+K palette: grouped commands, recent items, async search, nested pages and shortcut hints.
- [DateRangePicker](https://monarchui.dev/components/date-range-picker/)Start and end dates: typed or picked on a one- or two-month calendar with a live preview, presets and length limits.
- [FilterBar](https://monarchui.dev/components/filter-bar/)Filter row: search, removable, editable or toggle FilterChips, an "Add filter" menu, "Clear all", a result count and trailing controls.
- [SavedViews](https://monarchui.dev/components/saved-views/)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.
- [SearchInput](https://monarchui.dev/components/search-input/)Search box with icon, clear button, debounce, pending state and shortcut hint.

## Identity7

- [AssigneePicker](https://monarchui.dev/components/assignee-picker/)People picker with avatars, "you" first, Unassigned, Assign to me and an avatar stack.
- [Avatar](https://monarchui.dev/components/avatar/)Person or entity image with an initials and icon fallback, presence status and stacked groups.
- [MemberRow](https://monarchui.dev/components/member-row/)One member of a workspace or space: avatar, name, email, role, status (invited, active, suspended) and confirmed actions.
- [NoAppAccess](https://monarchui.dev/components/no-app-access/)The “you don’t have access to this app” screen: who can fix it, request access, contact an admin and switch workspace.
- [SpaceSwitcher](https://monarchui.dev/components/space-switcher/)Pick "All spaces" or one Space of the workspace, with search, New and Manage links.
- [UsernameAvailabilityInput](https://monarchui.dev/components/username-availability-input/)Input with an injected, debounced async check, a status icon and an announced result.
- [WorkspaceSwitcher](https://monarchui.dev/components/workspace-switcher/)Switch between the workspaces a person belongs to, with search and Create workspace.

## Collaboration9

- [ActivityTimeline](https://monarchui.dev/components/activity-timeline/)Vertical feed of events: actor, verb, object, time and marker, grouped by day, with expandable details and filters.
- [ChatDock](https://monarchui.dev/components/chat-dock/)The Rook Chat launcher with an unread badge and the panel that holds Rook Chat in an iframe (rook-chat-embed v1).
- [LinkedDocsPanel](https://monarchui.dev/components/linked-docs-panel/)Docs and links attached to a record: list, open, unlink, link a doc, add a link, filter by Space.
- [MentionPicker](https://monarchui.dev/components/mention-picker/)@mention suggestions anchored to the caret, with async search, people and channel groups and listbox keys.
- [MessageComposer](https://monarchui.dev/components/message-composer/)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/)One message: avatar, author, time and body, with edited, pending and failed states, reactions, replies and actions.
- [MessageTimeline](https://monarchui.dev/components/message-timeline/)Scrolling conversation: day separators, a “New messages” divider, older history on scroll-up and stick-to-bottom.
- [NotificationCenter](https://monarchui.dev/components/notification-center/)Bell with an unread count and a panel: All and Unread tabs, day groups, mark read, load more and an empty state.
- [RichTextEditor](https://monarchui.dev/components/rich-text-editor/)A Tiptap rich-text editor: accessible toolbar, Markdown shortcuts, safe paste, links, checklists, mentions, uploads and a character limit.

## Workflow3

- [KanbanBoard](https://monarchui.dev/components/kanban-board/)Columns of cards moved by drag (mouse, pen, touch) or keyboard, with counts, WIP limits, collapse and optimistic moves.
- [OnboardingChecklist](https://monarchui.dev/components/onboarding-checklist/)A first-run checklist with done steps, a progress summary, per-step actions, collapse and dismiss.
- [Stepper](https://monarchui.dev/components/stepper/)Multi-step progress for wizards and onboarding: horizontal or vertical, current, complete, error and optional steps.

## CRM1

- [RecordHeader](https://monarchui.dev/components/record-header/)The header of a record detail page: avatar, editable title, status, key facts, actions, prev/next, state banner and tabs.

## Technical infrastructure4

- [AuditLogViewer](https://monarchui.dev/components/audit-log-viewer/)Security and audit events in a table: actor, action, target, IP and device, a details drawer, filters, export and paging.
- [CustomDomainConnect](https://monarchui.dev/components/custom-domain-connect/)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/)Embed a page of another Rook app: sandboxed iframe, ready handshake, auto-height and focus handoff with origin checks.
- [SecretField](https://monarchui.dev/components/secret-field/)A masked secret with reveal and hide, optional copy, and a "set, not shown" state.

## Billing1

- [Money](https://monarchui.dev/components/money/)An amount of one currency, formatted by Intl.NumberFormat in tabular figures.

## Location1

- [LocationFields](https://monarchui.dev/components/location-fields/)Country, region, city and postal code as one composite, with the data source injected.

## Advanced interaction2

- [ReorderableList](https://monarchui.dev/components/reorderable-list/)A list reordered by dragging a handle (mouse, pen, touch) or fully from the keyboard, with every step announced.
- [ThemeToggle](https://monarchui.dev/components/theme-toggle/)Light, dark or system theme, saved in the shared rook_theme cookie and applied like the pre-paint script.