Scale-blur modal
Modal that scales up from 96% while un-blurring, over a dimmed backdrop.
Modal & overlay animations
Overlays are where motion matters most: they need to feel attached to what opened them, then get out of the way. These handle focus, Escape and scroll locking, so your agent doesn’t have to.
21 live assets · React + Tailwind + Motion · restyle to your design tokens
Transitions
Pop + overshoot modal
Modal that springs in from 85% with a little overshoot: friendly, bouncy, quick.
Fade + rise modal
Calm modal whose panel fades in while rising 14px on a long ease-out, with no scale and no bounce.
Slow veil modal
Backdrop veils in slowly as the page behind it blurs, then the panel fades up a beat later and leaves first on close.
Drag-to-dismiss bottom sheet
Bottom sheet whose grab handle follows your finger: dragging past 80px or flicking down dismisses it, and anything less springs it back.
Side drawer
Panel that springs in from the right (or left) edge over a dimmed backdrop, with a header, close button and scrolling body.
Origin-aware popover
Popover anchored to its trigger that scales out from the corner nearest the button, so it visibly grows from where you clicked.
Spring tooltip
Tooltip that waits a beat on hover (none on keyboard focus), then rises into place on a small spring; Esc dismisses it.
Context menu
Right-click, long-press or Shift+F10 menu that opens at the pointer, flips to stay in bounds, cascades its items in and flies out a submenu.
Hover card
Profile-style preview card that opens after a short hover or at once on focus, springs out of its trigger and stays open while you move onto it.
Shared-layout lightbox
Thumbnail grid whose tiles zoom into a lightbox as one shared element, step through the set with a directional slide and zoom back into place on close.
Notification center
Bell whose unread badge pops on every change and opens a panel of grouped notifications that swipe away and collapse.
Floating format toolbar
Selection toolbar that springs up above highlighted text with Bold, Italic, Underline and Link toggles and arrow-key roving focus.
Cookie preferences
Consent banner with equally weighted Reject all and Accept all, a Choose view that slides over to per-category switches with essential locked on, and an onChange that reports the decision without storing anything.
Product tour
Guided tour that dims the page around a spotlight cut-out and glides it and its step card from target to target, with Back, Next, Skip, a step count and Esc to end.
Type-to-confirm dialog
Destructive confirmation dialog whose delete button only arms once the resource name is typed exactly, shaking the field and swapping in an error when a mismatch is submitted.
Undo snackbar
Bottom snackbars with an Undo action and a draining countdown bar that pauses on hover or focus, stacking new ones underneath while older ones make room.
Share popover
Share button that springs open a panel with the link, a copy button that sweeps the field and morphs to Copied, and share targets you pass in that stagger up into place.
Corner cookie consent
Corner consent card with equally weighted Accept and Reject, a Manage toggle that opens per-category switches inline in the same card, and a small reopen button left in the corner once a choice is saved.
Keyboard shortcuts sheet
Help overlay opened with the ? key that lists shortcuts in groups with key caps, filters and highlights as you type, and closes with Escape.
Session timeout dialog
Hard-edged alert dialog that warns before sign-out with big countdown numerals and a stepped bar that drains block by block, Stay signed in (onExtend) and Sign out, announcing the time left politely at a few thresholds.
With your agent
From this page to your app in three steps
- 1Add the ones you like to your sheet. It holds your colours, type and motion.
- 2Connect Claude, Cursor or any MCP client in a click.
- 3Ask for the screen. Your agent pulls these exact components with your values filled in.
Do they trap focus?
Dialogs move focus in when they open, keep it inside, and return it to the trigger when they close.
Can they render inside a container?
Yes. Overlays take a container option, so they can sit in a panel or preview rather than the whole viewport.
More of the library
Guides and articles
Use caseWuizard for product teams: on-brand UI from every agentSeveral engineers, several agents, one product. Keep AI-written UI on brand with one design sheet, rules files in the repo and a check before review.5 min readComparisonComponent libraries vs a design sheet for AI-built UIInstalling a component library or giving your agent a design sheet over MCP: how the two compare on consistency, motion, control and upkeep.5 min readAlternativesAlternatives to a hand-written design rules fileA rules file tells your agent how the UI should look, in words. What it handles well, where it runs out, and four ways to give the agent more than prose.4 min read
Stop shipping apps that look AI-made.
Save what you love to a sheet, connect Claude or Cursor, and every screen comes out in your style. Free for 3 days on annual plans, card needed.