Every screen, flow, block and app template in SwiftPieces Pro, for good.All of Pro, $199 once.$199 once.Get Pro

Template · Productivity

Productivity App SwiftUI Template

Margin, a workday app: a complete Xcode project with an agenda, focus sessions, notes, insights, widgets and three brand presets. 16 screens and 4 flows in Margin, as a SwiftUI app template.

A productivity app on five tabs: Agenda with the week strip and the day's timeline, Focus with a timed session on one task, Notes with a morphing navigation pill, Insights with the week's numbers on a dashboard, and Settings. First run asks for reminders and offers Sign in with Apple before the Margin Pro paywall.

  • SwiftUI
  • iOS 17.0+
  • Xcode project 1.0.0
  • productivity-app
16 Screens4 Flows
Get SwiftPieces Pro

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

01

Flows

Complete journeys through Margin, from first launch to sign out, screen by screen. Open one to play it, or choose any screen to start there.

The first 3 steps of every flow are open. Pro opens every screen of every template, live in each style, and the SwiftUI to build them.

Sign inGet Pro

01 · Onboarding

First Run

Three welcome pages, the reminders request, an account and Margin Pro, ending on today's agenda.

5 Screens12 Steps
Play the flow
  1. 01The Whole Day, In One Line
  2. 02One Task At A Time
  3. 03See Where The Week Went
  4. 04Reminders
  5. 05Allow Notifications
  6. 06Reminders Are On
  7. 07Sign In
  8. 08Sign In With Apple
  9. 09Margin Pro
  10. 10Start The Trial
  11. 11Pro Unlocked
  12. 12Today

02 · Core Journey

Plan The Day

Add a task with its own project and time block, check off an errand, then focus on the next block and see the session logged.

5 Screens13 Steps
Play the flow
  1. 01Today
  2. 02New Task
  3. 03Pick A Project
  4. 04New Project
  5. 05Give It A Time Block
  6. 06On The Timeline
  7. 07Check Off A Task
  8. 08Q4 Roadmap Draft
  9. 09Focus On This Next
  10. 10Ready To Focus
  11. 11In Session
  12. 12Session Logged
  13. 13Back On The Task

03 · Core Journey

Notes And Insights

Search your notes, add to the review agenda, start a new note, then see the week and the month in Insights.

3 Screens9 Steps
Play the flow
  1. 01Notes
  2. 02Open The Pill
  3. 03Search Notes
  4. 04Design Review Agenda
  5. 05Add To It
  6. 06New Note
  7. 07Your Week
  8. 08Your Month
  9. 09Recent Activity

04 · Profile And Settings

Profile And Settings

Work hours, the theme, a CSV export and the upgrade to Pro, then signing out back to the welcome pages.

6 Screens10 Steps
Play the flow
  1. 01Settings
  2. 02Day Starts
  3. 03Reminders, Theme And Data
  4. 04Theme
  5. 05Export
  6. 06Upgrade To Pro
  7. 07Pro Is On
  8. 08Sign Out
  9. 09Signing Out
  10. 10Back To The Start

02

Screens

Every screen in Margin, 16 in all, each a SwiftUI view in the Xcode project. In Graphic, Neon and Studio, light and dark.

First run

Welcome, permissions and the questions that set the app up.

  • Welcome

    Three pages introduce the day's timeline, focus sessions and insights before the app asks for anything.

    Built onWelcomeOnboarding

  • Reminders

    Margin explains its two reminders, then asks iOS for notifications or lets you skip.

    Built onOnboarding

Account and subscription

Sign in, verification and the paywall.

  • Sign In

    Sign in with Apple to back up tasks, notes and focus history, or continue without an account.

  • Margin Pro

    Choose yearly with a seven-day trial or monthly to unlock projects, focus lengths, month insights and the larger widgets.

    Built onPaywall

Tabs

Where the app opens, one screen per tab.

  • Agenda

    Today's timeline of meetings and time blocks, what is on now, and the day's tasks to check off.

    Built onAgendaApp Shell

  • Focus

    Pick a task and a length, run the timer and log the minutes to that task.

    Built onFocusApp Shell

  • Notes

    Notes as block cards in two columns, with search and a pill that opens into filters and New note.

    Built onReaderProjectsApp Shell

  • Insights

    The week's focused minutes by day, tasks done, sessions, the focus streak and recent activity.

    Built onDashboardApp Shell

Details and sheets

What the tabs push and present.

  • Task Detail

    A task in full: its project, priority, due date and time block, the notes and the focus spent on it.

  • New Task

    Write a task, file it under a project, set its priority and give it a due date and a time block.

  • New Project

    Name a project and pick its color from the theme's blocks.

  • Note

    Write a note that saves as you type, and pin it to keep it at the top.

Profile and settings

The account, preferences, the subscription and sign out.

  • Settings

    Your account and plan, work hours, reminders, the theme, export and sign out.

    Built onSettingsApp Shell

  • Day Starts

    Choose when the workday starts, which sets where open time begins on the Agenda.

    Built onSettings

  • Theme

    Switch between the Graphic, Neon and Studio presets and pick light, dark or system appearance.

  • Export

    Share every task and focus session as a CSV file.

03

Built from the library

The library screens this template wires together, in the order someone meets them. Each one installs on its own too.

Agenda

A week strip, the day's timeline, a task's detail and the new-task editor.

Focus

A timed session on one task, logged to the task, with today's focus and streak.

Notes and insights

A notes list with the morphing pill, and a dashboard of the week's numbers.

04

What's included

SwiftUI source you own, built on Apple frameworks only.

  • A week strip with a day timeline, task details and a new-task editor
  • A focus timer tied to a task, logging each session to it
  • A notes list with the morphing navigation pill
  • An insights dashboard with a scrubbable chart and pull to refresh

Includes

App Shell, Lessons, Agenda, Focus, Reader, Dashboard. Installed together, automatically.

In the Build Kit

Productivity (brief). Your agent builds around this template in the same design.

05

Implementation notes

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

ProductivityApp puts four screens on the App Shell. Agenda is the week strip over the selected day's timeline, with a new-event sheet. Focus runs a timed session on one task, with ambient sounds and Do Not Disturb. Notes is a notes list whose floating Morph Nav pill turns into a toolbar or a panel; it sits just above the tab bar. Insights is the Dashboard screen with a scrubbable chart and pull to refresh.

Adapting it

  • Sample data: events live in CalendarStripExample, tasks and sounds in FocusTimerExample, notes in MorphNavExample and metrics in DashboardScreenExample.make(). The Insights sample shows business metrics; point it at your own numbers.
  • Tabs: reorder or drop entries in tabs. initialTab picks where the app opens.
  • Theme: set .environment(\.spTheme, …) on ProductivityApp to re-skin every themed screen.

Notes

  • Not @main: put ProductivityApp() in your own WindowGroup.

06

Keep building

Pieces that work well next to this one.