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

LibraryScreensBudget

Screen · Finance

Budget

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

A budget ring whose segments sweep in and morph between periods, with a counting center, drag-to-inspect with boundary ticks, a highlighting legend and an outer overshoot arc past budget.

SwiftUIiOS 17.0+spending-ring

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.

  • Segments sweep in and morph between periods
  • Drag around the ring to inspect a category, with boundary ticks
  • A counting center and an overshoot arc past budget
  • A legend that highlights with the ring
  • The Budget screen from the preview: periods, limits and Adjust budget

In the Build Kit

Graphic (style), Personal Finance (brief). Your agent builds around this screen in the same design.

Used in

Finance App (template)

02

Implementation notes

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

Segments sweep in on first appearance while the remaining amount counts up in the center. Drag around the ring to inspect: the segment under the finger lifts, the others dim, the center swaps to that category's amount and the matching legend chip highlights, with a tick at every boundary. Once spending passes the budget the ring shows the mix of spend and the excess is drawn as a thinner arc outside the ring in the warning tint. Switching periods morphs every segment to the new dataset.

Notes

  • Segments are keyed by category id, so a category present in both periods animates between its two arcs; one that disappears fades out. Arcs are a Shape with an animatable start and end.
  • Inspection is one DragGesture(minimumDistance: 0): movement over the band scrubs, a release without movement toggles the tapped segment, and a tap in the center clears. The ring is also an adjustable VoiceOver element that steps through categories and reads their amounts.
  • The center amount is an Animatable view, so it counts rather than jumps, and uses numericText for the digit roll.
  • Haptics: selection at each category boundary and on period change.
  • Reduce Motion skips the sweep-in and replaces the morph springs with short ease-outs.
  • SpendingRingExample at the end of SpendingRing.swift is the screen shown in the preview; copy it as a starting point.

03

Keep building

Pieces that work well next to this one.

Screen · Finance

Wallet

A wallet of stacked cards and passes you can bring forward, fan out and reorder.

Screen · Finance

Activity

Account activity grouped by day, with rows that swipe to categorize, split or hide.

Screen · Productivity

Dashboard

A home dashboard with a collapsing greeting, live metrics, a scrubbable chart and activity.