G.28
clicktweenzero deps
Metric Ticker
A dashboard metric with rolling or tweened updates, an honest delta badge and a live sparkline.
Data & Feedback · React / CSS / SVG / Tailwind
Dashboard Toolkit
Numbers deserve better than spinners.
Dashboards are read more often than they are admired, so motion here has a single job: help people notice what changed. Every component animates from the previous truth to the next one, never from zero, and every visual has an accessible text equivalent.
- G.26hoverkeyboardzero deps
Activity Heatmap
A contribution-style calendar heatmap with keyboard navigation and focus-aware tooltips.
Data & Feedback · React / Tailwind / CSS
- G.27pointerhoverspringmotion
Interactive Chart Tooltip
A responsive SVG line chart with a tracking crosshair, spring-led tooltip and keyboard inspection.
Data & Feedback · React / Motion / SVG / Tailwind
- F.21clickpressspringmotion
Animated Toggle
A tactile switch whose thumb springs across the track and squashes when pressed.
Forms & Inputs · React / Motion / SVG / Tailwind
- G.57clickspringmotion
Radial Gauge
A semi or three-quarter dial whose needle springs between values, with labelled threshold zones.
Data & Feedback · React / Motion / SVG / Tailwind
- G.59clicklayoutmotion
Bar Race
Horizontal bars that grow, shrink and overtake each other as the data changes.
Data & Feedback · React / Motion / Tailwind
- G.58viewportclickstaggermotion
Activity Timeline
A vertical timeline whose line fills to the current step, with staggered reveal and collapsible notes.
Data & Feedback · React / Motion / CSS / Tailwind
- G.56hoverdragspringmotion
Toast Stack
Stacked notifications that peek behind each other, fan out on hover and swipe away.
Data & Feedback · React / Motion / Tailwind
- G.87hoverclicktweenzero deps
Donut Chart
An interactive donut: arcs sweep in, segments slide out on hover or focus, the legend re-flows the ring.
Data & Feedback · React / SVG / Tailwind
- G.88hoverclickspringzero deps
Radar Chart
A spider chart for up to three series whose polygons spring between datasets.
Data & Feedback · React / SVG / Tailwind
- G.89hoverkeyboardzero deps
Uptime Bar
Status-page uptime bars: one bar per day, computed overall uptime, a legend and tooltips on hover, tap and keyboard focus.
Data & Feedback · React / CSS / Tailwind
- G.90viewportcontinuouszero deps
Skeleton Loader
Content-aware skeletons that mirror your layout, shimmer in sync and crossfade into real content without layout shift.
Data & Feedback · React / CSS / Tailwind
- D.77clickhoverspringmotion
Collapsible Sidebar
An app sidebar that springs down to an icon rail, with fading labels, rail tooltips, nested groups and a sliding active marker.
Navigation & Menus · React / Motion / Tailwind
- G.117hoverfocustweenzero deps
Sparkline
A word-sized chart for tables and text: line, area or bars, coloured by trend, with a computed summary and nearest-value tooltip.
Data & Feedback · React / SVG / Tailwind
- G.118hoverfocustweenzero deps
Storage Meter
A stacked usage bar with animated segments, a legend with percentages, tooltips and threshold status.
Data & Feedback · React / CSS / Tailwind
- G.120clickkeyboardspringmotion
Notification Bell
A bell with a rolling unread badge, a wobble on new arrivals and a popover panel with read states.
Data & Feedback · React / Motion / Tailwind
- G.119viewporttweenmotion
Countdown
A countdown to a date with rolling digits, progress rings, localised unit labels and a hydration-safe start.
Data & Feedback · React / Motion / SVG / Tailwind
- G.147dragpointertweenzero deps
Brush Chart
A time-series chart with an overview brush: drag or resize the window and the main chart glides to the new range.
Data & Feedback · React / SVG / Tailwind
- G.148hoverclicktweenmotion
Funnel Chart
A conversion funnel whose stages re-taper smoothly when data changes, with step conversion, drop-off and overall rate.
Data & Feedback · React / Motion / CSS / Tailwind
- G.149hoverclickspringmotion
Treemap
A squarified treemap of nested data: colour by group, tooltips, and click-to-zoom drill-down with a breadcrumb back up.
Data & Feedback · React / Motion / Tailwind
- G.150viewportspringmotion
Activity Rings
Concentric goal rings that spring to their values, wrap past 100% with a shadowed overlap lap, and report as meters.
Data & Feedback · React / Motion / SVG / Tailwind
- B.127dragkeyboardtweenzero deps
Resizable Panels
Split panes with draggable, keyboard-operable dividers, px or % limits, snapping collapsible panels and nested groups.
Cards & Containers · React / Tailwind
- G.177clickkeyboardzero deps
Data Table
A sortable, selectable table on real <table> semantics with multi-sort, resizable columns, density and paging.
Data & Feedback · React / Tailwind
- G.178dragkeyboardzero deps
Gantt Chart
A project timeline with draggable, resizable bars, dependency arrows, milestones, progress and day / week / month zoom.
Data & Feedback · React / SVG / Tailwind
- G.179hoverpointerstaggerzero deps
Scatter Plot
An SVG scatter plot with size and colour encodings, nearest-point tooltips, lasso or box selection, legend toggles and keyboard travel.
Data & Feedback · React / SVG / Tailwind
- G.180hoverfocusstaggerzero deps
Waffle Chart
A grid of cells filled in category order to show parts of a whole, with a staggered fill, highlightable categories and smooth reassignment.
Data & Feedback · React / CSS / Tailwind
- G.209pointerdragzero deps
Candlestick Chart
An OHLC candlestick chart with volume, a moving average, crosshair tooltip, wheel / drag pan-zoom and candle-by-candle keys.
Data & Feedback · React / SVG / Tailwind
- G.208hoverfocusspringmotion
Sankey Diagram
A Sankey flow diagram with an inline layout: hover or focus a node to trace its flows, keyboard navigation and animated data changes.
Data & Feedback · React / Motion / SVG / Tailwind
- G.210draghovercontinuouszero deps
Force Graph
A force-directed network graph in SVG: inline simulation that settles and stops, draggable nodes, zoom and pan, keyboard navigation.
Data & Feedback · React / SVG / Tailwind
- G.207clickkeyboardspringmotion
Event Calendar
A month and week calendar with colour-coded event chips, "+N more" popovers, timed blocks, direction-aware slides and grid keys.
Data & Feedback · React / Motion / Tailwind
- B.188scrollkeyboardtweenzero deps
Virtual List
A windowed listbox that renders only the visible rows of a huge list, with measured variable heights, sticky group headers and scrollToIndex.
Cards & Containers · React / Tailwind
Technology requirements
Everything this set needs, combined. Each component remains a separate, self-contained file.
ReactCSSSVGTailwindMotion
- npm dependencies
- motion
- Peer
- react, tailwindcss
npm install motion- Metric Ticker documentation
- Activity Heatmap documentation
- Interactive Chart Tooltip documentation
- Animated Toggle documentation
- Radial Gauge documentation
- Bar Race documentation
- Activity Timeline documentation
- Toast Stack documentation
- Donut Chart documentation
- Radar Chart documentation
- Uptime Bar documentation
- Skeleton Loader documentation
- Collapsible Sidebar documentation
- Sparkline documentation
- Storage Meter documentation
- Notification Bell documentation
- Countdown documentation
- Brush Chart documentation
- Funnel Chart documentation
- Treemap documentation
- Activity Rings documentation
- Resizable Panels documentation
- Data Table documentation
- Gantt Chart documentation
- Scatter Plot documentation
- Waffle Chart documentation
- Candlestick Chart documentation
- Sankey Diagram documentation
- Force Graph documentation
- Event Calendar documentation
- Virtual List documentation