Apply sheet
Glow ring button
Primary button with a slow conic light running around its border.
Motion button animations
A button is the most-pressed thing in your app. These give it a press, a hover and a finish that match your sheet (from quiet underlines to a jelly squish), with focus styles and reduced motion handled.
23 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.
Ship it ↗
Hard-shadow button
Chunky button with an offset hard shadow that presses flat on click.
Shimmer sweep button
Primary button with a soft band of light sweeping across it on a slow loop.
Squishy pill
Pill button that squashes wider and shorter while pressed, then springs back with a jelly wobble.
Underline sweep
Text button whose underline draws in from the left on hover or keyboard focus and exits to the right.
Hairline fill
Hairline-outlined button where a solid fill rises from the bottom on hover and inverts the label exactly at its edge.
Loading → success button
Submit button that collapses into a spinning circle while its action runs, then draws a check on success.
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.
Button → dialog morph
A button whose shape grows into its dialog panel as a shared element and shrinks back into the button on close, with focus returning to it.
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.
Split button
Primary action joined to a chevron that springs open a menu of alternative actions, with arrow keys, Home/End, type-ahead and Esc per the WAI-ARIA menu button pattern.
Ripple button
Material-style button whose ink ripple spreads from the press point to the far corner and fades on release, rippling from the centre for keyboard presses.
Toggle button group
Toggle button group for single or multiple selection, with aria-pressed and roving arrow keys: a pill slides between options in single mode, and pressed neighbours merge into one run in multiple mode.
FAB speed dial
Floating action button that turns its plus into an × and fans out labelled actions in a spring stagger, with arrow-key navigation, an optional scrim and Esc to fold away.
Button → bottom sheet
A floating action button grows into a bottom sheet as one shared element, its colour washing out, with drag or flick to dismiss back into the button.
Gradient border button
Solid button framed by an accent-tinted conic gradient border that turns continuously and smoothly spools up to a faster spin, with a brighter halo, on hover or keyboard focus.
Arrow slide button
Call-to-action whose trailing arrow slides out to the right while a twin springs back in from the left and the label nudges forward, on hover or keyboard focus, in solid, outline and link styles.
3D press button
Raised button standing on a visible edge with a ground shadow: it lifts a touch on hover, sinks into its base on pointer or Space/Enter press, and springs back up on release.
Icon morph button
Toggle button whose plus springs into a check, cross or minus by moving the same two strokes to new endpoints while it turns, filling with the accent and pulsing once, with aria-pressed state.
Text roll button
Button or nav link whose label rolls up out of view letter by letter while a duplicate rolls in from below on hover or keyboard focus, staggered from the start or from the centre.
Stepped fill button
Slab button with a thick border, hard offset shadow and boxed arrow cell: on hover or keyboard focus the accent floods across in a few hard bands that invert the label at each band edge, the arrow hops out of its cell and back, and a press drops it flat onto its shadow.
Block progress button
Slab async button whose label cuts to a row of hard-edged block cells while its action runs (a three-block run marching across, or cells filling beside a percentage when given progress), then cuts to an accent done stamp, or jolts sideways in hard frames and offers a retry.
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 work with forms and links?
They render real buttons that pass through native props, so type=submit, disabled and aria attributes work as you’d expect.
How do I keep every button consistent?
Put one in your sheet’s button.primary slot. Your agent then uses that exact component everywhere instead of inventing new ones.
More of the library
Guides and articles
GuideConnect your coding agent to Wuizard over MCPConnect Claude, Claude Code, Cursor, Windsurf or any MCP client to Wuizard, so your agent builds with your exact colours, fonts and components.6 min readGuideDesign a sheet from the library and fine-tune itBuild a Wuizard sheet by hand: start from a vibe or the library, set colours, type and motion, fill slots, add rules and check it in the live preview.5 min readUse caseWuizard for vibe-coders: polished UI without a designerBuilding with Claude Code or Cursor and no designer? Give your agent a design system it follows, so your app stops looking like every other AI-built app.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.