OverviewAssetsMotionCode
Sliding tab pill
Segmented tabs with an indicator that glides between options.
Navigation & menus
Navigation is felt on every click. These menus and tabs move with intent (indicators that slide, panels that morph) and stay fully usable from the keyboard.
21 live assets · React + Tailwind + Motion · restyle to your design tokens
Components
Magnifying dock
Icon dock where items swell as the cursor passes over them.
Hover-follow nav
Row of nav links with a soft pill that glides to the hovered or focused link and settles back on the current page.
Morphing menu icon
Hamburger button whose bars fold to the centre and cross into an X when the menu opens, then unfold when it closes.
Floating pill nav
Full-width top bar that springs into a compact, frosted floating pill once the page or a scroll container scrolls past a threshold.
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.
Staggered dropdown
Menu button whose items cascade in one after another, with arrow-key roving focus and Escape to close.
Collapsing sidebar
App sidebar that springs between full width and a slim icon rail, fading its labels as it narrows.
Collapsing breadcrumbs
Breadcrumb trail that folds its middle crumbs into an ellipsis button, which unfolds them inline one after another.
Sliding pagination
Pagination with prev/next and ellipsis windows, where the active marker slides to the chosen page and the numbers roll the way you travelled.
Morphing mega menu
Top nav whose panels drop open with a height-and-fade reveal, then morph size and glide under each trigger as you move along, with hover intent and arrow keys.
Stretchy underline tabs
Accessible tabs whose underline stretches across to the next tab leading edge first, while panels crossfade with a slide in the direction you moved.
Mobile tab bar
Bottom tab bar where a pill slides to the chosen tab, its icon bounces up into it and only the active tab shows its label.
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.
Table of contents
A sticky in-page table of contents whose active entry follows the heading you're reading via IntersectionObserver, with an accent bar that springs along the track and links that smooth-scroll to their section.
Scrolling tab bar
An overflowing tab bar that scrolls sideways with edge fades that grow with what's hidden, scroll buttons only on the side that has more, and an indicator that springs to the active tab while the strip glides to keep it in view.
Fullscreen menu
A menu button that opens a full-screen overlay in a circle growing from the button, with big numbered links rising from their masks in a stagger and the whole thing playing backwards on close; focus is trapped and Esc closes.
Navigation rail
A compact vertical icon rail whose labels slide out beside it on hover or focus, which springs open over the page with labels arriving in a stagger, and whose active pill glides between items.
Filter chips
A horizontally scrollable row of multi-select filter chips with counts, where chosen chips fill with the accent as a check mark springs in and a Clear button slides in at the front, with full keyboard support.
Folder tabs
WAI-ARIA tabs drawn as numbered folder tabs on a thick-bordered panel with a hard shadow: the chosen tab jumps up and fuses with the panel in a few hard frames while the last drops back behind it, and the new panel cuts in behind a stepped wipe travelling the way you moved.
Nested command menu
Command menu with grouped commands, recent items and shortcut hints, where Enter on a group drills into its list behind a breadcrumb chip, search reaches nested commands, and Backspace on an empty field steps back.
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 on mobile?
Yes, and there are mobile-first patterns too, like a bottom tab bar and a collapsing sidebar.
Can I match my router?
They render real links or buttons you configure, so they work with any router.
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 readGuideConnect 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 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.