Skip to content
Monarchv0.5.1
GitHub

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

    The signed-in Rook layout: rail, optional identity bar and main, with a skip link and contained scrolling.

  • Marketing sections

    MarketingSection, MarketingSectionHeader, FeatureGrid, ProductFrame, StatStrip, CTABand and FAQ: the body of a public page.

  • MarketingHero

    The opening section of a public page: eyebrow, the page h1, lead, actions and media.

  • PageHeader

    Top of a main view: the single h1, back link or breadcrumbs, status, details, page actions with overflow, and tabs.

  • SectionCard

    A titled card for one section: header with actions and "View all", body, footer, and built-in loading, empty and error states.

  • SectionHeader

    Unboxed section title with description, meta, actions, a trailing link and busy state.

  • Separator

    Horizontal or vertical divider.

  • SettingsSection

    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

    The frame of a public page: wordmark, navigation with disclosure panels, actions, and a footer of link columns.

  • SplitInboxLayout

    The one-page inbox: list, detail and context panes, resizable and collapsible, single-pane with back navigation on phones.

  • SplitLayout

    List and detail panes side by side, one pane at a time on narrow screens.

  • VisuallyHidden

    Screen-reader-only text.

Typography1

  • Kbd

    Keyboard shortcut hint.

Actions4

  • Button

    Primary, secondary, ghost and danger actions; loading and icon-only forms.

  • CopyButton

    Copies a value to the clipboard, confirms it visibly and to screen readers, and reports failures.

  • CopyField

    A read-only value with a copy button: links, records, keys and snippets.

  • Toolbar

    Search, controls and trailing actions above a list, with arrow-key focus movement.

Forms15

  • Checkbox

    Binary or indeterminate choice with inline label.

  • Combobox

    Searchable single or multiple select with groups, async search, a create option and an inline mode.

  • DurationInput

    Free-text duration field ("1h 30m", "90m", "1.5h") with a minutes value and arrow-key steps.

  • EntityPicker

    Pick one or several records (projects, contacts, teams) from a searchable list in a popover.

  • Field

    Label, control, help and error wired together with the right ARIA.

  • InlineEditText

    Text that edits in place: async save, pending and error states, validation.

  • Input

    Text entry at three sizes, with invalid and disabled states.

  • OTPPinInput

    One-time code or PIN entry in separate boxes, backed by one accessible input.

  • SchemaDrivenForm

    A form rendered from a field schema: seven field types, required and validation rules, sections and conditional fields.

  • SegmentedControl

    Single choice as a radio group with arrow keys; ToggleGroup for several on/off choices.

  • Select

    Single-value picker with typeahead and keyboard navigation.

  • Switch

    Immediate on/off setting.

  • SwitchSettingsList

    On/off settings that each save on their own, with saving, error and retry per row.

  • TagInput

    Chips for a list of short values: Enter or comma to add, paste to split, keys to remove.

  • TemplatePicker

    Choose a template from a gallery: category filters, search, thumbnails, a blank option, a preview pane and arrow-key grid navigation.

Navigation7

  • BackLink

    A link to the parent page with a leading back arrow; works with any router.

  • Breadcrumb

    Location trail with the current page last and long trails collapsed into a menu.

  • IdentityBar

    The top bar of a Rook app: product name, search, notifications and the account menu.

  • Link

    Text link with inline, standalone and subtle styles and safe new-tab handling.

  • Pagination

    Numbered or compact page navigation for long lists.

  • RookRail

    The shared Rook navigation rail: 48px icons that expand to labels, remembered across apps, with a drawer on phones.

  • Tabs

    Line and pill tab sets, link tabs, filter tabs, counts and scrolling lists.

Data display8

  • Accordion

    Stacked sections whose bodies expand and collapse under heading triggers.

  • Badge

    Status and metadata labels in six tones.

  • Card

    Grouped content surface.

  • DescriptionList

    Key/value facts on detail pages, with copyable values, empty placeholders and clamped long values.

  • Progress

    Linear progress, quota meters and stacked segments.

  • RelativeTime

    A localised "3 hours ago" in a <time> element, with the absolute time on hover and focus.

  • StatCard

    A KPI tile: label, formatted value, change versus a period, hint, help, sparkline and drill-down.

  • StatusBadge

    Typed status registry: label, tone and a distinct icon or dot, so colour is never the only signal.

Tables and data grid3

  • BulkActionBar

    Toolbar shown while items are selected: count, actions with an overflow menu, clear selection and a polite announcement.

  • DataTable

    Column-driven data table with sorting, selection, column controls, pagination, states and keyboard grid navigation; plus the Table parts it is built on.

  • LoadMore

    Cursor pagination footer with loading, error and retry, end of list and announcements.

Status and feedback11

  • Alert

    Inline message about a page or section.

  • CalloutBanner

    Page- or section-level banner: trials, maintenance, billing, failed syncs and narrowed scopes.

  • EmptyState

    What will appear here, and the action that creates it.

  • ErrorPage

    A whole page failed: not found, forbidden, server error, offline or maintenance.

  • ErrorState

    A region failed to load: what failed, why in plain words, and a retry.

  • InlineErrorRetry

    A compact "this part didn’t load" row with Try again.

  • InlineNotice

    A one-line tone message attached to a field, row, card or panel.

  • LoadingState

    A region is loading: a layout-shaped skeleton or a labelled spinner, announced once.

  • Skeleton

    Loading placeholder shapes.

  • Spinner

    Indeterminate progress.

  • Toast

    Transient notifications from useToast(), rendered by ToastProvider.

Overlays8

  • ConfirmDialog

    Confirmation for consequential actions: danger tone, type-to-confirm, reason, async pending and error.

  • Dialog

    Modal with focus trap, Escape and focus return.

  • DropdownMenu

    Action menu with checkbox, radio and nested items.

  • Popover

    Non-modal floating panel.

  • ResponsiveDialog

    A Dialog on wide screens and a bottom sheet on phones, switched in CSS.

  • Sheet

    Side or bottom panel with focus trap, scroll lock, sizes and safe areas.

  • SupportPanel

    The rail’s Help & support panel: in-app support chat, help articles, contact options and the status page.

  • Tooltip

    Supplementary text on hover and focus.

Date, time and scheduling9

  • AgendaList

    Events grouped by day with sticky day headings, a Today marker and an empty state.

  • CalendarMonthView

    A month grid of days with events, "+N more" popovers and arrow-key movement.

  • DatePicker

    A date field: type in the locale’s format or pick from a calendar popover, with presets, min/max and Field errors.

  • DateTimePicker

    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

    One event in a calendar view: colour, title, time and status, as a button or link.

  • MiniMonth

    A keyboard-navigable month grid (APG date-picker grid) with min/max, disabled days, week numbers and event dots.

  • TimeGrid

    Day and week view: hours, an all-day row, overlap layout, now line, working hours and slots.

  • TimezoneSelect

    Searchable IANA time zone picker labelled by UTC offset and city, with detected and pinned zones.

  • WeeklyHoursEditor

    Edits weekly availability: days on or off, several intervals a day, copy and overlap checks.

Charts8

  • BarChart

    Vertical and horizontal bar charts, grouped or stacked, with value labels, highlight, reference lines, keyboard tooltips, drill-in and a data table.

  • BarList

    A ranked list with an inline bar per row: top pages, referrers, rivals by score.

  • ChartFrame

    The container every chart sits in: title, controls, legend, loading / empty / error states and an accessible data table.

  • DeltaIndicator

    An up, down or flat change with sign, arrow and a spoken sentence; colour follows which direction is better.

  • DonutChart

    Parts of one whole as a donut in ChartFrame: total in the middle, a legend of values and shares, and a data table.

  • LineChart

    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

    A word-sized trend line, area or sparkbar for tables, stat cards and lists, with gaps, invert, thresholds and a text alternative.

  • StackedProportionBar

    One horizontal bar split into proportions, with a legend of values and shares as a real list.

Files2

  • FileUpload

    A drop zone and browse button that checks type, size and count, explains refusals and hands files to the product.

  • UploadQueue

    The list of uploads in flight: progress, status, cancel, retry, remove and a total summary.

Search and discovery5

  • CommandPalette

    A ⌘K / Ctrl+K palette: grouped commands, recent items, async search, nested pages and shortcut hints.

  • DateRangePicker

    Start and end dates: typed or picked on a one- or two-month calendar with a live preview, presets and length limits.

  • FilterBar

    Filter row: search, removable, editable or toggle FilterChips, an "Add filter" menu, "Clear all", a result count and trailing controls.

  • SavedViews

    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

    Search box with icon, clear button, debounce, pending state and shortcut hint.

Identity7

  • AssigneePicker

    People picker with avatars, "you" first, Unassigned, Assign to me and an avatar stack.

  • Avatar

    Person or entity image with an initials and icon fallback, presence status and stacked groups.

  • MemberRow

    One member of a workspace or space: avatar, name, email, role, status (invited, active, suspended) and confirmed actions.

  • NoAppAccess

    The “you don’t have access to this app” screen: who can fix it, request access, contact an admin and switch workspace.

  • SpaceSwitcher

    Pick "All spaces" or one Space of the workspace, with search, New and Manage links.

  • UsernameAvailabilityInput

    Input with an injected, debounced async check, a status icon and an announced result.

  • WorkspaceSwitcher

    Switch between the workspaces a person belongs to, with search and Create workspace.

Collaboration9

  • ActivityTimeline

    Vertical feed of events: actor, verb, object, time and marker, grouped by day, with expandable details and filters.

  • ChatDock

    The Rook Chat launcher with an unread badge and the panel that holds Rook Chat in an iframe (rook-chat-embed v1).

  • LinkedDocsPanel

    Docs and links attached to a record: list, open, unlink, link a doc, add a link, filter by Space.

  • MentionPicker

    @mention suggestions anchored to the caret, with async search, people and channel groups and listbox keys.

  • MessageComposer

    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

    One message: avatar, author, time and body, with edited, pending and failed states, reactions, replies and actions.

  • MessageTimeline

    Scrolling conversation: day separators, a “New messages” divider, older history on scroll-up and stick-to-bottom.

  • NotificationCenter

    Bell with an unread count and a panel: All and Unread tabs, day groups, mark read, load more and an empty state.

  • RichTextEditor

    A Tiptap rich-text editor: accessible toolbar, Markdown shortcuts, safe paste, links, checklists, mentions, uploads and a character limit.

Workflow3

  • KanbanBoard

    Columns of cards moved by drag (mouse, pen, touch) or keyboard, with counts, WIP limits, collapse and optimistic moves.

  • OnboardingChecklist

    A first-run checklist with done steps, a progress summary, per-step actions, collapse and dismiss.

  • Stepper

    Multi-step progress for wizards and onboarding: horizontal or vertical, current, complete, error and optional steps.

CRM1

  • RecordHeader

    The header of a record detail page: avatar, editable title, status, key facts, actions, prev/next, state banner and tabs.

Technical infrastructure4

  • AuditLogViewer

    Security and audit events in a table: actor, action, target, IP and device, a details drawer, filters, export and paging.

  • CustomDomainConnect

    Connect a custom domain: enter it, copy the DNS records, verify, and see pending, verifying, active or failed.

  • EmbeddedAppFrame

    Embed a page of another Rook app: sandboxed iframe, ready handshake, auto-height and focus handoff with origin checks.

  • SecretField

    A masked secret with reveal and hide, optional copy, and a "set, not shown" state.

Billing1

  • Money

    An amount of one currency, formatted by Intl.NumberFormat in tabular figures.

Location1

  • LocationFields

    Country, region, city and postal code as one composite, with the data source injected.

Advanced interaction2

  • ReorderableList

    A list reordered by dragging a handle (mouse, pen, touch) or fully from the keyboard, with every step announced.

  • ThemeToggle

    Light, dark or system theme, saved in the shared rook_theme cookie and applied like the pre-paint script.