B.158
clickkeyboardspringmotion
Animated Dialog
A native <dialog> modal that scales in from the button that opened it, with a blurred backdrop, alertdialog mode and nesting.
Cards & Containers · React / Motion / Tailwind
Overlays & Layers
Everything that appears above the page.
Overlays are where accessibility most often breaks: focus escapes, Escape does nothing, the page behind stays clickable. Every component here uses the browser's top layer or a correct ARIA pattern, traps and returns focus where it should, and closes the way people expect.
- B.160dragclickspringmotion
Side Drawer
A left or right panel on a native dialog: modal overlay or non-modal push, with velocity drag-to-close.
Cards & Containers · React / Motion / Tailwind
- B.39dragclickspringmotion
Bottom Sheet
A draggable modal sheet that snaps between heights with velocity, built on a native dialog.
Cards & Containers · React / Motion / Tailwind
- B.159hoverfocusspringmotion
Smart Tooltip
An accessible tooltip for hover and keyboard focus with flip / shift placement, a pointing arrow and an OS-style delay group.
Cards & Containers · React / Motion / Tailwind
- B.69hoverfocusspringmotion
Link Preview
An inline link that springs out a preview card on hover or keyboard focus, with collision-aware placement.
Cards & Containers · React / Motion / Tailwind
- D.107clickpressspringmotion
Context Menu
A right-click and long-press menu with checkbox and radio items, nested submenus, shortcuts, typeahead and full menu ARIA.
Navigation & Menus · React / Motion / Tailwind
- G.56hoverdragspringmotion
Toast Stack
Stacked notifications that peek behind each other, fan out on hover and swipe away.
Data & Feedback · React / Motion / Tailwind
- B.129clickkeyboardspringmotion
Product Tour
An onboarding tour that dims the page, springs a spotlight between targets and anchors a step card with collision handling.
Cards & Containers · React / Motion / SVG / Tailwind
- D.15keyboardclicktweenzero deps
Command Menu
A searchable command palette with grouped commands, fuzzy matching and full keyboard control.
Navigation & Menus · React / CSS / Tailwind
- B.67clickkeyboardtweenzero deps
Zoom Image
Click an image to zoom it from its exact on-page position to fit the viewport, in a native modal dialog.
Cards & Containers · React / CSS / Tailwind
- B.190clickdragtweenzero deps
Lightbox Gallery
A thumbnail grid that opens a full-screen <dialog> lightbox: FLIP from the thumbnail, swipe, pinch / double-click zoom and a thumbnail strip.
Cards & Containers · React / CSS / Tailwind
- B.189clickpresstweenmotion
Story Viewer
A stories viewer with segmented progress, tap and hold gestures, a cube turn between people and a native <dialog> modal.
Cards & Containers · React / Motion / Tailwind
- D.196pointerkeyboardtweenzero deps
Selection Toolbar
A Medium-style toolbar that floats above a text selection inside one container, keeps the selection intact and is reachable with Alt+F10.
Navigation & Menus · React / CSS / Tailwind
Technology requirements
Everything this set needs, combined. Each component remains a separate, self-contained file.
ReactMotionTailwindSVGCSS
- npm dependencies
- motion
- Peer
- react, tailwindcss
npm install motion- Animated Dialog documentation
- Side Drawer documentation
- Bottom Sheet documentation
- Smart Tooltip documentation
- Link Preview documentation
- Context Menu documentation
- Toast Stack documentation
- Product Tour documentation
- Command Menu documentation
- Zoom Image documentation
- Lightbox Gallery documentation
- Story Viewer documentation
- Selection Toolbar documentation