SwiftUI charts and data components
Interactive charts you scrub with a finger, a donut chart, a streak heatmap, a rolling number counter and KPI tiles with live sparklines.
About these pieces
One self-contained Swift file each, Apple frameworks only, from iOS 17.
Scrub Chart is a line or bar chart with a readout, a flag that rides the scrub rule, hold-and-drag range selection with delta and percent, and a range picker that morphs the line between datasets. Ring Breakdown is a donut chart you scrub around, with a haptic at each slice boundary and legend rows that light up with the slice.
Odometer rolls each digit on its own slot like a mechanical counter, carrying from the low digits up so unchanged digits never move. Live Stat is a metric tile whose value rolls with a spring, with a sparkline you hold and scrub.
Activity Heatmap is a streak calendar for habits, workouts and study: weeks of days in solid shades laid out by the person's first weekday, a current streak that stays alive until midnight, and a scrub that reads any day with a callout and a haptic tick.
Learn the technique: SwiftUI animations guide.
Questions
How the pieces work, and how to build the same thing yourself. Every piece's page has its full notes.
Should I use Swift Charts or a custom chart?
Swift Charts is the right default for standard plots. These pieces are for the interaction around a chart that finance and health apps need: scrubbing, range selection, morphing datasets and haptic slice boundaries.
How do I make a GitHub-style contribution heatmap in SwiftUI?
Lay days out in week columns starting on the calendar's first weekday, step through days with the calendar rather than adding seconds, and shade each day by a level derived from your data. Activity Heatmap does this in one Canvas with streaks, scrubbing and VoiceOver.
How do I animate a number counting up in SwiftUI?
For simple cases use contentTransition(.numericText()) with withAnimation. For a mechanical roll where only changed digits move, lay out each digit as its own vertical strip and offset it, which is what Odometer does.
Keep browsing
Nearby collections, then every category in the library.
- Feedback5Reactions, ratings, status morphs, skeletons and outcomes.
- Buttons and controls7Buttons and dials with press depth, hold, drag and outcome states.
- Animations16Springs, gesture physics, transitions and morphs, across every category.
- Text4Type that reveals, expands, holds pictures and renders as glass.
- Backgrounds2Quiet atmospheres: a Metal silk shader and a touch-reactive dot grid.
- Liquid Glass5Correct iOS 26 Liquid Glass with Material fallbacks.
- Inputs and forms17Tracks, steppers, rails and fields built for the thumb, down to addresses, map pins and signatures.
- Cards5Cards with depth, motion, parallax and gesture-driven stacks.
- Lists7Rows, grids and carousels with swipe, drag-to-select, follow-the-latest and completion physics.
- Navigation7Floating docks, tracking tabs, stretchy headers and an A to Z index.
- Sheets5Toasts, confirmations, permission moments and guided tours.
- Motion1Gesture modifiers with real physics.
- AI6Streaming replies, thinking states, prompt chips and answer sources.
- Media8Photo viewing and cropping, story playback, attachments and link previews.
- Haptics33Pieces that tick, tap and confirm at the moment that matters.
Ready to build something better?
85 pieces, one file each, yours to keep. Start with the library or see what the whole app looks like.