Active connected sheets+12.4%
0123456789,012345678901234567890123456789
Rolling counter
Numbers roll digit by digit like an odometer when the value changes.
Animated charts & data
Numbers land harder when they move with purpose. These charts and stat tiles draw in once, update smoothly when the data changes, and come with a text alternative for screen readers.
25 live assets · React + Tailwind + Motion · restyle to your design tokens
Animations
0%
Daily goal6 of 8 habits
Progress ring
Circular progress that fills on a spring and counts up its label.
MATLAKJS+12
Editing this sheet nowAvatar fan-out
Overlapping avatars that fan apart and reveal names on hover.
Bar chart
Column chart whose bars spring up from the baseline one after another, with a value tooltip that glides to the hovered or focused bar.
Sparkline
Compact trend line that draws itself in over a soft area fill, with a crosshair dot that reads out the value under the pointer or the arrow keys.
Donut chart
Donut whose segments sweep in one after another around a centred total and lift on hover or focus to show their share in the middle, with a legend.
KPI delta tile
Metric tile whose big number tweens to each new value while its up/down delta badge flips arrow and colour with a small spring.
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.
Line chart
Responsive line and area chart with axes, gridlines and a legend whose series draw in, plus a crosshair and tooltip that glide to the nearest point under the pointer or the arrow keys.
Activity heatmap
Contribution-style calendar grid whose cells ripple in diagonally, shaded in steps of the accent, with a tooltip that glides to the hovered or arrow-key-focused day and a less-to-more legend.
Gauge meter
Semicircle meter whose needle springs to the value (overshooting, then settling) while the accent arc and centre readout follow it, with tick marks and min/max labels.
Breakdown bars
Ranked list of labelled horizontal bars that grow in one after another behind their labels, count up their values and percentages, and glide into their new order when the numbers change.
Segmented meter
Usage meter that splits one bar into segments growing in one after another over a hatched free-space track, with a legend whose items spotlight their segment on hover, focus or press, dimming the rest and swapping the headline readout.
Funnel chart
Hard-edged conversion funnel whose column bars rise one after another under hatched ghosts of the users each step lost, with a readout of the step rate for the hovered or arrow-key-focused step, which lifts on a hard shadow.
Live stream chart
Real-time line chart that scrolls left continuously as samples arrive, the newest point riding a pulsing head dot, with a dashed threshold line that flags the readout when crossed and a Live/Paused toggle that freezes the view.
KPI tiles with sparklines
Row of KPI tiles (label, value, delta chip and a mini sparkline) under a period switcher that tweens every value and line at once, folding to two by two in narrow containers.
Target KPI tile
Metric tile with a bullet bar: the value fills toward a target marker over a ghost of the previous period, beside a delta chip and a percent-of-target that counts up.
Sparkline list
Ruled metric rows, each with a value, a delta and a sparkline, whose crosshairs move together across every row as you hover or arrow through the dates.
Activity feed card
Dashboard activity card grouped by day, with initials avatars, filter tabs and live relative times, where new items wait behind an "N new" pill instead of shifting the list under the reader.
Nested progress rings
Two to four concentric rings that sweep to their values on a spring, beside a legend that counts up; pick a legend row to spotlight its ring and read it in the centre. For goals and quotas.
Leaderboard
Ranked rows (rank, initials avatar, name, score bar) that glide to their new places when scores change, flag how far each moved, and keep your own row pinned to the edge of the list while it is scrolled out of view.
Month calendar heatmap
Month calendar whose days are shaded in accent steps by value, with month paging that slides, a less-to-more legend and a tooltip that follows the pointer or the arrow keys from day to day.
Cohort retention grid
Retention grid of cohorts by period whose cells fill in a diagonal sweep, shaded by the share retained, with a row and column crosshair that follows the pointer or the arrow keys.
Uptime bars
Hard-edged daily status cells (up, degraded, down, no data) that rise in from the left, with a tooltip per day for pointer and arrow keys and an overall figure computed from the data passed in.
Radar chart
Radar chart whose polygons grow out from the centre on a spring, for up to three series, with axis labels that double as focusable points reading every series' value on that axis and a legend that shows or hides each series.
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 I need a chart library?
No. They’re small React components drawn with SVG and divs, so there’s nothing else to install.
Are the charts accessible?
Each one carries an accessible summary of its data, and colour is never the only way to tell series apart.
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.