Source: https://monarchui.dev/patterns/

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](https://monarchui.dev/components/app-shell/)The signed-in Rook layout: rail, optional identity bar and main, with a skip link and contained scrolling.
- [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.
- [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.
- [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.

## Actions1

- [Toolbar](https://monarchui.dev/components/toolbar/)Search, controls and trailing actions above a list, with arrow-key focus movement.

## Navigation2

- [IdentityBar](https://monarchui.dev/components/identity-bar/)The top bar of a Rook app: product name, search, notifications and the account menu.
- [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.

## Overlays1

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

## Search and discovery1

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

## Collaboration2

- [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).
- [MessageTimeline](https://monarchui.dev/components/message-timeline/)Scrolling conversation: day separators, a “New messages” divider, older history on scroll-up and stick-to-bottom.

## 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 infrastructure3

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