Standard Overlays & Menus

A right-docked panel manager for multiple drafts at once.

React

Confirmation dialog with least-destructive initial focus, async action support, Escape cancellation, and focus restoration.

React

A small marker pinned to a live element to flag something new or needing attention, that opens its explanation on click rather than hover. The badge itself persists until the user explicitly dismisses it, so a flagged field stays flagged until actually read, not until the cursor happens to pass over it.

React

StandardAssignmentDrawer — the right-docked panel for assigning one record: who, where, what state, and a note, with the record's context kept visible beside the fields instead of behind a dimmed modal.

React

Mobile data-entry sheet with three drag snap points — peek, half and full — so the page stays reachable behind it instead of a full-screen takeover. Drag by pointer or step by keyboard, Escape to close, focus returns to the trigger.

React

A floating bottom toolbar that appears only while a list selection is non-empty, announcing the count through a live region. Non-modal by design so the list stays operable underneath.

React

One step of a product walkthrough — a spotlight ring that tracks a live target element, a callout card with a step counter and Next/Back/Skip, fully keyboard operable. Escape always exits the whole tour, never just the current step, so a new user is never stuck in a walkthrough with no way out.

React

A pin-anchored threaded comment popover with a real composer and single-open coordination across sibling pins.

React

Right-click and long-press menu for an item, grouped into labelled sections with arrow-key and typeahead navigation, disabled items, and automatic edge flipping so it never opens off-screen.

React

Two-month calendar in a popover for picking a start/end range, with one-click presets for today, last 7/30 days, and this/last month.

React

Stops an accidental delete click by keeping the destructive action disabled until the person types the exact resource name back, with full keyboard and screen-reader support.

React

Action menu button with arrow and typeahead navigation, disabled items, separators, Escape close, and focus return.

React

A full-viewport drag-and-drop surface listening on the window, shown only while a file drag is over the app.

React

Rich preview panel that appears when someone hovers or focuses a link or avatar — a bio card, a profile summary, an account snapshot — with open and close delays so it never flashes on a passing pointer.

React

Full-width, page-level notice bar for outages, trial warnings or a system-wide success confirmation — distinct from a boxed in-content alert card. Pairs an icon with a text severity label so meaning never rides on colour alone, carries an optional action button alongside dismiss, and announces through an aria-live region set to polite for info/success and assertive for warning/error.

React

A right-docked drawer for assigning a job or task to a team member: a job summary header, a picker list of candidates with their current availability, and a notes field.

React

Full-screen viewer for a photo grid — click any thumbnail to open on that frame, then step through with arrows, keyboard or a swipe while a counter and dot rail always show exactly where in the set you are.

React

Bottom sheet for narrowing a product or search list — grouped checkbox filters with a live 'show N results' count on the apply button, so shoppers see the effect of a selection before it's committed, and reset undoes the whole draft in one tap.

React

Accessible native modal dialog with inert background, Escape close, backdrop dismissal, and focus restoration.

React

A setup or checkout dialog that carries its own wizard flow instead of forcing a custom build: progress rail, Back/Next footer, per-step validation gating, and focus moved to the new step's heading on every change, with focus returned to the trigger on close.

React

Dropdown menu whose items open child menus of their own, any number of levels deep — a 'File > Export > Image' pattern. Up/Down traverse the current level, Right opens a submenu and focuses its first item, Left closes it and returns focus to the parent item, Escape closes every open level at once. Each submenu flips to the opposite side when it would render off the viewport edge.

React

A corner-docked getting-started checklist that collapses to a progress-ring badge, with its state persisted and a once-only completion callback.

React

Click-triggered panel for small interactive content — a quick filter, a mini form, a colour picker — with an arrow that stays pinned to the trigger, flips side when it would run off the viewport, and traps focus inside while it's open.

React

An emoji reaction grid popover with a persisted frequently-used row and two-dimensional arrow-key navigation.

React

A small anchored popover for assigning one team member to a territory for a given day, with a status (available, on leave, sick, …) and a free-text note.

React

Type-to-filter dropdown for picking one item out of a long list from a toolbar or filter bar, with full keyboard selection and typeahead highlighting.

React

Bottom-anchored share sheet with social and messaging targets plus a copy-link action, built on plain outbound URLs so it needs no platform SDK or API key.

React

A right-docked sheet for viewing one record's several facets — details, activity, files — as tabs instead of one long scroll, with arrow-key tab navigation and the open tab remembered across close and reopen. A content organiser for an existing record, not a drafting surface like the slide-over drawer.

React

Right-docked drawer for data entry that keeps the page behind it visible and interruptible, with a collapse-to-dock tab so a draft stays open while the user keeps working elsewhere. Trapped focus, locked scroll, Escape to close, focus returns to the trigger.

React

One-click primary action fused to a dropdown of its close relatives — 'Save' plus a chevron for 'Save as draft' or 'Save and publish' — so the common path stays a single tap while the variants are a keystroke away, with each half independently announced to assistive tech.

React

Lets a sheet open another sheet on top of itself for a drill-down flow — edit a customer, open their billing history, open one invoice — with every parent layer still visibly behind the newest one and a back path that unwinds exactly one step at a time.

React

App-wide notification queue triggered from a hook anywhere in the tree: caps how many toasts show at once, holds the rest in a queue, pauses auto-dismiss on hover or focus, and separates urgent from routine variants into the correct screen-reader announcement channel.

React

Hover and focus-triggered hint for icon buttons and truncated labels that waits a beat before appearing, repositions itself away from viewport edges, and is reachable and dismissible from the keyboard — unlike the native `title` attribute it replaces.

React

A one-at-a-time bar for an action already taken — delete, archive, send — with a visible countdown and an Undo button that stays keyboard-reachable the whole window. Hovering or focusing it pauses the clock. Distinct from the toast queue: this holds exactly one reversible action, not a stream of notices.

React