Swift PiecesPro
  • Library
    Screens48Finished, designed screens for real apps.Templates10Complete apps built from the screens.Build Kit24Styles, briefs and recipes for your coding agentEverything58The whole library, with search
  • Docs
  • Pro

Library

  • Screens48
  • Templates10
  • Build Kit24
  • Everything58
  • Docs
  • Pro
  • Account
Get Swift Pieces ProFree library ↗
Swift PiecesPro

Production-ready SwiftUI screens and app templates for iOS. The pieces to build the whole app.

Library

  • Screens
  • Templates
  • Build Kit
  • Everything

Product

  • Pro
  • Your account
  • Sign in

Resources

  • Docs
  • CLI
  • MCP and agents
  • Free library

Social

  • X / Twitter
  • GitHub

SWIFTPIECES PRO

© 2026 Swift Pieces. One payment, lifetime access, per-developer commercial license.

Curated withby Saivion

LibraryScreensNutrition

Screen · Food

Nutrition

A week in packed bubbles you tap to focus, with a progress figure and capsule bars.

A statistics screen built on a packed bubble chart: each bubble is a category sized by its share, packed with a physics-free solver and allowed to crop at the edge. Tap one to focus it while the rest re-pack around it; a giant progress figure with a dot grid and a column of capsule bars sit below.

SwiftUIiOS 17.0+bubble-chart

Get Swift Pieces Pro

$199 once, every piece included. See how installing works · Sign in

01

What's included

SwiftUI source you own, built on Apple frameworks only.

  • Packed bubbles sized by share that re-pack around the one you tap
  • A giant progress figure over a dot grid
  • Capsule bar columns for the week
  • Chart data exposed to VoiceOver through Audio Graphs
  • The Nutrition screen from the preview, ready to adapt

In the Build Kit

Candy (style). Your agent builds around this screen in the same design.

Used in

Meal Planner (template)

02

Implementation notes

How it behaves, what it handles, and the decisions behind it.

Each bubble is a food group, its area set by its share of the week, packed tightly around the largest and allowed to run past both edges of the screen. Tap one and it grows to the middle while the rest re-pack around it in one spring, showing what it adds up to; tap it again to let go. Below the chart, a giant percentage of the weekly plan sits over a dot grid of the week's meals (cooked, skipped, still ahead), and the days stand as columns of capsule bars, one capsule per meal.

Notes

  • BubbleChart fills the frame you give it and never clips, so place it full width and let the screen crop the outer bubbles. It takes its data, colours and fonts through parameters and reads no theme.
  • The packing is a small deterministic solver, not a physics simulation: bubbles are placed largest first (the focused one before all), each at the closest spot that touches its neighbours without overlapping, then the cluster is scaled to fit the height. The same steps run in the web preview, so both draw the same picture.
  • Labels stay readable when a bubble runs past an edge: they slide toward the middle of the screen while staying inside their bubble.
  • Every bubble is a button with its group and share for VoiceOver, with the selected trait when focused, and the chart exposes its data to Audio Graphs through an accessibility chart descriptor.
  • Reduce Motion swaps the re-pack spring for a short ease.
  • BubbleChartExample at the end of BubbleChart.swift is the screen shown in the preview, with the plan card, the daily balance columns and the app's floating bar. Copy it as a starting point.

03

Keep building

Pieces that work well next to this one.

Screen · Food

Recipes

Drawn category tiles that re-rank with a spring as you pick what you need.

Template · Food

Meal Planner

Sprig, a meal planning app: a complete Xcode project with recipes that fit your pantry, a week plan, a grocery list, nutrition stats, cook mode, widgets and three brand presets.

Screen · Finance

Budget

A budget overview around a ring you can scrub, with category limits and period switching.