Interaction patterns, responsibly built

Interfaces that feel natural to everyone.

A living design-system showcase for dialogs, menus, tabs, comboboxes, and accordions. Every example is built to be explored with a keyboard or assistive technology.

Start with the modal 123 patterns to explore
Component reference

Five core patterns. One shared standard for clear, dependable interaction.

APG aligned
01Overlay

A contained decision with a clear next step. Focus is trapped, the background goes inert, and Escape returns you to where you began.

Live exampleEsc to dismiss

Keyboard contract · Tab cycles inside · Esc closes · focus returns to trigger

03Navigation

Tabs

Roving tabindex keeps one tab in the tab order. Arrow keys move the selection while hidden panels stay truly hidden.

Live example← → switch panels
Active members1,284↗ 12%
Tasks completed86↗ 8%
On track94%↓ 2%
Good morning, Maya.

Your sprint is moving in the right direction. Review the latest signals before your next standup.

Keyboard contract · ← → switch tabs · one tab in tab order · panels reveal on selection

04Input

Combobox

Type to filter a large option set. The highlighted option is announced through aria-activedescendant and remains out of the tab order.

Live example↑ ↓ filter · Enter select

Choose a destination

Keyboard contract · type to filter · ↑ ↓ highlight · Enter selects · Esc reverts

05Content

Accordion

Multiple regions can stay open at once. Height animates only while content is visible, then the region is hidden for assistive technology.

Live exampleEnter / Space toggles a region

Every example uses native controls where possible, semantic structure where needed, and explicit relationships between labels, controls, and regions. State changes are reflected in the DOM and announced.

Focus is intentional. Dialogs trap focus and return it, menus close predictably, and only the active tab sits in the tab order. A visible focus ring appears on every interactive element.

The layout reflows into a single column, controls retain generous hit targets, and menus and panels never rely on visual placement alone. Content remains readable and operable at any supported browser zoom.

Yes. The showcase respects prefers-reduced-motion, shortening transitions and keeping every state change immediate without sacrificing visibility or accessibility.

Keyboard contract · Enter / Space opens and closes · multiple regions may remain open

Built for the long run

Clear patterns make better products.

Use these examples as a starting point for your own interface. The smallest details are where trust is built.

Explore the pattern set