Weekly digest
Streak reminders
Squash toggle
Switch whose thumb stretches as it travels, then settles on a spring.
Toggle & input animations
Forms are where people actually do things. These inputs give clear, satisfying feedback and follow the right keyboard and ARIA patterns out of the box.
27 live assets · React + Tailwind + Motion · restyle to your design tokens
Components
Work email
Floating label input
Text field whose label lifts out of the way as you type, with a focus ring.
Segmented control
Single-choice segmented control with a thumb that slides between options and full arrow-key navigation.
One-time code input
Verification code boxes that auto-advance, handle backspace and pasted codes, with a focus ring gliding between them.
Drawn checkbox
Native checkbox whose box fills from the centre while the tick draws itself on stroke by stroke.
Range slider with value bubble
Accessible range slider whose value pops up in a springy bubble above the thumb while dragging or using the keyboard.
Ease toggle
Calm on/off switch whose thumb glides on a soft ease-out curve with no bounce as the track colour cross-fades.
Expanding search
Search icon button that springs open into a text field and folds back on Escape or when left empty.
Tag input
Text field that turns entries into chips on Enter or comma: chips spring in, shrink out when removed by button or Backspace, and the tag list is fully controlled.
Spring select
Custom select whose listbox springs open from the trigger with staggered options and a sliding highlight, with arrow keys, Home/End, Enter, Escape and type-ahead.
Rolling number stepper
Minus/plus stepper whose digits roll up or down with the change, repeats while a button is held and shakes when pushed past its min or max.
Radio cards
Radio group laid out as cards with a highlight ring that slides to the chosen card and arrow-key navigation per the WAI-ARIA radio pattern.
Star rating
Five-star rating with a hover preview fill, a springy bounce on the star you land on, optional half stars and arrow-key control as a slider.
Password strength meter
Password field with a show/hide toggle and a four-segment strength meter that springs full and shifts from ink to accent, plus a hint on what to add next.
File dropzone
Dropzone that swells and marches its dashed border on drag-over, then lists added files with prop-driven progress bars and remove buttons.
Sign-in card
Email and password sign-in card with show/hide, remember me and a submit that spins while your async onSubmit runs, then shakes on error or springs to a check on success.
Date picker
Date field with a calendar popover whose months slide left or right as you page, an optional range band and full WAI-ARIA dialog and grid keyboard navigation.
Multi-step form
Form wizard with a step header whose connectors fill, direction-aware panel slides, per-step validation and a final review step with edit links.
Colour picker
Saturation and brightness square, hue slider, swatches and hex field that stay in sync and output hex, all keyboard-operable, with thumbs that glide to clicked or stepped positions.
Autocomplete combobox
WAI-ARIA combobox that filters as you type with accent-insensitive, prefix-first matching, highlights the matched letters and animates its listbox as results glide into their new order.
Range slider (two thumbs)
Min/max slider whose thumbs can't cross, with the filled range between them and value bubbles that merge into one low–high bubble when the thumbs get close.
Inline edit
Text that turns into an auto-sizing input on click, Enter or F2, saves with Enter or a check (async-aware), reverts with Esc and confirms the save in place with a soft highlight and a popping check.
Amount input
Currency field that formats as you type with Intl.NumberFormat for any currency and locale, keeps the caret in place, and has quick-pick chips that roll the number to their amount.
Slab text field
Thick-bordered text field with its label on a tab joined to the top edge: focus inverts the tab and drops a hard shadow out from under the field in two frames, an error turns the shadow accent, jolts the field and prints the message on an inverted strip, and an optional counter flips to accent near the limit.
Block switch
Rectangular on/off switch on a hard shadow whose solid block thumb slams across in a few stop-motion frames to cover the inactive half, revealing ON on an accent field or OFF on the surface, and sinks onto its shadow while pressed.
Face slider rating
Rating slider whose face morphs from a frown to a smile by interpolating one SVG mouth path as you drag or use the arrow keys, snapping to five labelled stops.
Textarea with limit ring
Auto-growing textarea with a small ring that fills toward the character limit, takes the accent and shows the count near it, goes negative past it, and tells screen readers once you pause typing.
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.
Controlled or uncontrolled?
Both. Pass value and onChange to control them, or let them manage their own state.
Do they follow ARIA patterns?
Yes. Switches, radio groups, listboxes and sliders use the matching roles and keyboard behaviour.
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 readGuideConnect 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 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.