Interaction patterns for production interfaces
A curated collection of React interactions that solve real UX problems. Every one is accessible, performant, documented, and free to copy.
- documented
- 19
- categories
- 7
- keyboard accessible
- 95%
- in migration
- 0
- React 19
- TypeScript
- Tailwind v4
- Motion
Featured
All patternsCommand Palette
A palette that arrives as a modal over the page discards the one piece of context people had — where the search box was, and what it was part of.
NavigationProductivitySearchDashboard- Keyboard
- Touch
- Responsive
- Reduced motion
Mega Nav
Separate dropdowns per section make each one feel like a different place, so browsing across a product's navigation hides the fact that the sections are siblings.
NavigationProductivityDashboardOnboarding- Keyboard
- Touch
- Reduced motion
Voice Transcript
A voice note cannot be skimmed or searched, so there is no way to tell whether it is worth forty seconds until you have already spent them.
FeedbackMessagingMediaAccessibility- Keyboard
- Touch
- Responsive
- Reduced motion
Invite Card
An invite sent to the wrong address cannot be taken back by the sender, and a bare text field gives you nothing to check before you commit.
InputFormsProductivityOnboarding- Keyboard
- Touch
- Responsive
- Reduced motion
Inline Search
Search needs room to type and the browse filters are already using it, so one has to give — and sending search to its own screen takes the filters away with it.
NavigationSearchCommerceMedia- Keyboard
- Touch
- Responsive
- Reduced motion
Editable Label
Renaming something usually means leaving for a settings screen, which hides the thing you are renaming at the moment you decide what to call it.
InputProductivityEditorForms- Keyboard
- Touch
- Responsive
- Reduced motion
Delete with Undo
Confirmation dialogs are answered reflexively, so people click through them and lose the thing anyway; deferring the commit is recoverable where a dialog is not.
ActionProductivityDashboardAuthentication- Keyboard
- Touch
- Responsive
- Reduced motion
Inline Confirm
A modal confirmation breaks flow and trains people to dismiss without reading, at which point it has stopped confirming anything.
FeedbackProductivityDashboard- Keyboard
- Touch
- Responsive
- Reduced motion
Splitting Accordion
An open accordion panel shares its container with every other row, so the boundary between the answer you opened and the questions you did not is ambiguous.
DisclosureProductivityOnboarding- Keyboard
- Touch
- Responsive
- Reduced motion
Browse by category
Recently added
- Command PaletteA palette that arrives as a modal over the page discards the one piece of context people had — where the search box was, and what it was part of.
- Mega NavSeparate dropdowns per section make each one feel like a different place, so browsing across a product's navigation hides the fact that the sections are siblings.
- Quick SelectA dropdown for two or three choices makes you open a list, read it and aim at a row — three steps to flip something you already understood.
- Voice TranscriptA voice note cannot be skimmed or searched, so there is no way to tell whether it is worth forty seconds until you have already spent them.
Reach out.
Are you a founder, or a fellow designer or engineer looking to create something your users won’t forget? Or looking for a design engineer to add to your team? Please feel free to reach out.