Saved to your sheet
Deployed to production
Stacked toasts
Notifications that stack and compress like a deck, newest on top.
Micro-interactions
The small moments (a like, a copy, a saved state) are what people remember. These are tuned to feel good without getting in the way.
38 live assets · React + Tailwind + Motion · restyle to your design tokens
Components
Pull me
Magnetic button
Button that leans toward the cursor and snaps back on a spring.
128
Like burst
Heart that pops with a ring of particles when you like something.
Inline alert
Dismissible inline alert in info, success, warning and danger tones that springs open, pushing content down, and folds away when closed, with urgent tones announced immediately.
Success confetti
Wraps a button or badge and bursts token-coloured confetti from it on success; the pieces arc up, tumble down, fade and unmount.
Error shake
Form field wrapper that shakes side to side and flashes its border in the accent when validation fails, with the error message announced and linked to the input.
Copy → copied
Copy-to-clipboard button whose icon morphs into a drawn check while its label swaps to “Copied”, then reverts after a short hold.
Notification bell
Bell icon button that rings with a damped spring wobble and pops its unread badge every time the count goes up.
Progress steps
Horizontal multi-step progress whose connectors fill up to the current step while completed steps morph from numbers into drawn checkmarks.
Announcement bar
Top-of-page announcement strip that slides down on mount, carries an optional link and collapses its height smoothly when dismissed.
Bookmark toggle
A bookmark button whose outline fills with the accent from the bottom up while the icon dips and springs back, flicking a few particles when saved.
Sun / moon theme toggle
A theme switch whose sun retracts its rays and swells while an SVG mask circle slides in to carve it into a crescent moon.
Paper plane send
A send button whose paper plane winds back and flies off up-right, a check springs in once the send resolves, then the plane glides back.
Hold to confirm
A destructive button you press and hold (by pointer, Space or Enter) while a fill sweeps across; letting go early rewinds and cancels.
Play / pause morph
Media toggle whose two pause bars fold into the halves of a play triangle by interpolating matched SVG paths, with its accessible label swapping between Play and Pause.
Success check
Confirmation mark that draws its ring and then its check before settling with a soft pulse and fading halo, sized for inline use after an action via a show prop.
Reaction picker
Like button that opens a tray of SVG-drawn reaction faces on hover, long-press or the Up arrow; faces magnify under the pointer and the chosen one flies back into the button.
Was this helpful?
Inline feedback prompt with thumbs or a three-face scale: the pick pops with a spring and the widget eases open into an optional comment box, then folds into a thank-you with a drawn check.
Follow → following
Follow button that pops and grows into “Following” by springing open only the letters that differ, drawing a check, beside a follower count whose changed digits roll up or down.
Upvote
Vote toggle whose arrow fills and hops up with a rising “+1” when you vote, dips when you take it back, and rolls only the changed digits of its count in the matching direction.
Add to cart fly
Add-to-cart button that throws a dot or small thumbnail along an arc into a cart button, whose badge count bumps and icon wobbles with a spring the moment it lands.
Download progress
Round download button whose arrow drops away into a progress ring that springs to a value prop, shows a stop square to cancel, and pops into a filled, drawn check when done.
Show password
Labelled password field with an aria-pressed “Show password” eye whose lid lowers, lashes and all, while the text is hidden and lifts open, pupil glancing at the text, when it is shown.
Live field validation
Text field that reports async validation in place (a small spinner while it checks, a drawn check when it passes, and an error that slides out from under the field as the border takes the accent), wired to aria-invalid, aria-describedby and a polite live region.
Inline confirm
Hard-shadowed destructive button that asks twice in place: the first press flips it to the accent with a Cancel square and a draining disarm bar, and the second (after a double-click guard) runs your async action and stamps the button flat.
Autosave status
Quiet editor-toolbar save indicator whose cloud glyph shifts from an unsaved dot to a lifting arrow while saving, draws a check on save that settles into a self-updating “Saved 2 min ago”, and offers Retry when a save fails.
Connection banner
App-top strip for a dropped connection that opens with a ticking retry countdown and Retry now, swaps to a spinner while reconnecting, then turns the accent with a drawn check for “Back online” and folds itself away.
Form error summary
Heavy-bordered box that lands above a form after a failed submit (its offset shadow stamps out, a big count rolls, each problem links to its field) and strikes through and folds away each fix until it reads all clear.
Mute toggle
Speaker button whose sound waves collapse into the cone one after another as a cross draws in when muted, then thumps and ripples its waves back out when sound returns, with the wave count following a volume prop.
Lock toggle
Padlock button whose keyhole turns before the shackle pops up and swings open on its hinge, then swings back, drops and lands with a small clunk as the body fills with the accent when locked again.
Sort toggle
Column-header sort button that cycles unsorted, ascending and descending, its three bars re-ranking short-to-long or long-to-short one after another while the arrow flips to point at the larger end, with aria-sort-ready values.
Voice record toggle
Round mic button that morphs its capsule into a stop square and grows into a pill with live level bars, a running timer and a breathing ring while recording, then folds back when you stop.
Sparkle switch
On/off switch for AI-style features whose thumb carries a sparkle that fills, twinkles round and throws a few glints as it slides on while a sheen sweeps the track, then dims back to an outline when switched off.
Dice roll
Shuffle button for random picks and surprise-me actions: its die hops, tumbles and squashes as it lands on a new face, its pips sliding and popping into the new layout one after another.
Rule checklist field
Text field with a live checklist of rules underneath that tick with a drawn check as each one is met; once you leave the field, the error names only the rules still missing (any rules, not just passwords).
System banners
App-top banners in info, warning and critical tones, each with an action and dismiss; more than one collapses into the most severe banner with the rest peeking underneath and an N more toggle that expands the stack.
Update available toast
New-version toast whose Reload turns into a short progress fill and then calls onReload, while Later (or a quiet timeout that pauses on hover and focus) folds it into a small dot badge that reopens it.
Score scale survey
Zero-to-ten score scale (a radio group with arrow keys) whose chosen cell pops and opens a follow-up comment field that fits the score, then settles into a thank-you state.
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.
Are they just decoration?
Each one confirms an action: it tells the user something happened, then settles.
Can I use them with my own icons?
They draw their own icons inline, and the components are easy to adapt if you need different glyphs.
More of the library
Guides and articles
Use caseWuizard for indie developers: launch with a finished lookSolo and shipping fast? Give your coding agent a design system it follows, from the first screen to the landing page, the app icon and the changelog.5 min readComparisonScreenshot inspiration vs live components for UI designGalleries of app screenshots or a library of running components: what each tells you about a design, and which one your coding agent can build from.5 min readArticleWhy AI-built apps all look the same, and how to fix itAI coding agents reach for the same defaults on every project. Where the generic look comes from, why prompts don't fix it, and what does.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.