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.
App UI patterns
The screens every product needs and every agent rebuilds from scratch. These arrive with keyboard support, focus handling and your tokens, so the fiftieth settings page still feels like yours.
19 live assets · React + Tailwind + Motion · restyle to your design tokens
Components
Settings panel with save bar
Settings form in sections of switches and selects whose sticky save bar springs up with a change count when anything differs from the saved values and slides away after Save or Discard.
Sortable data table
Data table with aria-sort headers, a filter field and selection checkboxes whose rows glide to their new order, and a bulk action bar that replaces the toolbar while rows are selected.
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.
Chat thread
Chat message list whose bubbles slide in from the sender's side, with a bouncing typing indicator, auto-stick to the newest message in its own scroll box and a composer.
Onboarding checklist
Collapsible getting-started card whose progress ring fills as items strike through and fade, bursting into an all-done state with a drawn check when the last one lands.
Account menu
Avatar button that springs open an account menu with a name and email header, items, a sliding light/dark/system theme row and sign out, using the full WAI-ARIA menu keyboard pattern.
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.
Search results
Search field over a results list that highlights query terms, rolls its result count, staggers new result sets in and shows an empty state, with the query controlled by you.
Kanban board
Small kanban board whose cards lift and tilt as you drag them between columns while a drop slot opens and counts update, with Space-and-arrow keyboard moves.
Command palette
⌘K dialog with a search field and filtered command list, where arrow keys slide a highlight between rows and Enter runs the command.
Expandable table rows
Data table whose rows open a details panel that eases to its natural height as the row's chevron turns, with a real button in every row for keyboard users.
Settings layout
Settings frame with a section nav whose marker slides between items and a content column with a section header, where a narrow frame turns the nav into a list that pushes into each section.
Profile form
Profile settings with avatar change and remove, name, a username behind a fixed prefix, a bio with a live count and a verified-email badge, where Save and Cancel wake up as soon as anything is edited.
API keys
Keys table with name, masked prefix, created and last used, a create step that reveals the new secret once with copy and a warning, and revoke behind a confirm.
Side-rail steps
Onboarding frame with a vertical step list (done steps tick, the current one opens its hint) beside direction-aware panels, folding to a top bar on phones.
Welcome screen
Welcome screen that greets by name, staggers in three short points beside a token-drawn illustration, with Get started and Skip for now.
No results
No-results block that echoes the query, lists active filters as removable chips that collapse out of the row as you clear them (focus moves to the next one), and offers Clear all.
Empty state
Empty-state block with a gently floating token-coloured illustration, a title, a short body and a primary action that enter in a soft stagger.
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 these wired to a backend?
No, they’re just UI. Each takes its data and callbacks as props (onSubmit, onSave, onMove…), so you connect them to your own API.
Are they accessible?
They use the matching WAI-ARIA patterns (grid navigation in the date picker, menu semantics in the account menu, keyboard moves on the kanban board) and respect reduced motion.
More of the library
Guides and articles
GuideConnect Windsurf and other MCP clients with an API keyCreate a personal Wuizard API key and add it to Windsurf, Claude Code, Cursor or any MCP client's config. Then check it works, rotate it and keep it safe.5 min readGuideDescribe your app to get a full design systemTell the Wuizard sheet designer what you're building in a sentence. It picks colours, type, motion and components, then you refine the sheet by chatting.5 min readUse 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 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.