Skip to content
Monarchv0.5.1
GitHub

Patterns

Patterns

16 patterns: compositions of components for screens most applications have. They carry layout, semantics and accessibility; data, routing and state stay in the app.

Layout5

  • AppShell

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

  • PageHeader

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

  • SettingsSection

    Titled card of settings rows with a save footer and dirty state, loading and no-access states, and a danger-zone variant.

  • 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.

Actions1

  • Toolbar

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

Navigation2

  • IdentityBar

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

  • RookRail

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

Overlays1

  • SupportPanel

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

Search and discovery1

  • FilterBar

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

Collaboration2

  • ChatDock

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

  • MessageTimeline

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

CRM1

  • RecordHeader

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

Technical infrastructure3

  • 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.