SwiftUI Component Tutorials

Sections, swipe actions, custom rows, pull-to-refresh, search — production patterns.

.sheet, .fullScreenCover, .presentationDetents — every modal API.

Every Button style, a custom ButtonStyle, async actions, and iOS 26 Liquid Glass buttons.

Tabs, paged carousels, programmatic selection, and the iOS 26 floating Liquid Glass tab bar.

Type-safe navigation with NavigationPath, deep-link restoration, and the NavigationView migration.

Focus state, validation, formatting, SecureField, and iOS 16 multiline TextField.

value-based animation, transitions, matchedGeometryEffect, springs, and iOS 26 keyframes.

Segmented, menu, wheel, and navigationLink Picker styles bound to a CaseIterable enum.

Sections, grouped styles, and building a real Settings screen with LabeledContent.

.alert with actions, text-field alerts, and .confirmationDialog action sheets.

Switch and button toggle styles, a custom ToggleStyle, and gating premium features.

LazyVGrid with adaptive GridItems, pinned headers, and the iOS 16 static Grid.

A reusable card component via ViewModifier, with shadows, tap navigation, and Liquid Glass.

Indeterminate spinners, determinate bars, custom styles, and async loading states.

A custom tab bar where the selection indicator travels between tabs rather than cutting.

A horizontal ruler picker — the control you want for weight, age, duration, tempo.

A slider that grows under your thumb and ticks haptically as it crosses steps.

A pointed bubble anchored to whatever it is explaining.

iOS 26 Liquid Glass, with a fallback that is actually worth shipping below iOS 26 rather than a flat rectangle.

A swatch grid.

A small status pill.

The indicator slides between segments via matchedGeometryEffect rather than cutting.

Minus / value / plus, with press-and-hold repeat that accelerates.

An arc gauge.

A closed circular progress ring, determinate or indeterminate.

Soft UI: two shadows, one light from the top-left and one dark from the bottom-right, so the surface appears extruded from its background.

A transient message, presented as a modifier so it overlays the whole screen instead of being wedged into your layout.

Search field with a Cancel button that slides in on focus.

A navigation bar that fades in its background as content scrolls under it, rather than sitting on an opaque slab from the first pixel.

A list row: optional leading symbol, title, optional subtitle, and whatever you want on the trailing edge.

A titled group.

Star rating you can tap or drag across.

A selectable tag.

One-time-code entry.

Expand/collapse with the chevron rotating on the same spring as the height change, so the two read as one movement instead of two.

A vertical timeline: order status, activity feeds, onboarding progress.

Avatar with an initials fallback, an optional presence dot, and a stacked group variant.

A pull-to-refresh indicator you can brand, unlike .refreshable's fixed system spinner.

A tinted container for an SF Symbol.

A snapping card carousel.

A celebration burst for purchases, streaks and completions.

The screen you see when there is nothing to see.

A FAB that fans out secondary actions when expanded.

Page dots where the active one stretches into a capsule instead of just changing colour.

Placeholder shapes for loading states.

A drawer that slides in from the edge, with the main content pushed and scaled behind it.

A compact trend line for cards and rows — no axes, no legend, no chart framework.

A message bubble whose body and tail are one continuous path, so a border follows the silhouette instead of running around two shapes.

Renders a model response at a steady reading cadence no matter how erratically the tokens arrive.

A growing input bar whose trailing button changes job rather than multiplying: dictate when empty, send when there is a draft, stop while the model is answering.

Markdown rendered as real blocks — headings, lists, quotes, rules and fenced code — with inline parsing handed to Foundation so bold, links and inline code still work inside a bullet.

A code surface with copy-in-place confirmation, an optional gutter, and horizontal scrolling rather than wrapping.

The collapsible thinking disclosure, showing the line the model is currently on rather than a spinner.

Names the action an agent is taking while it takes it, with an indeterminate bar that proves the app is alive without pretending to measure progress.

An inline source marker sized to sit inside a sentence without breaking its rhythm, with a fixed minimum width so one- and two-digit citations do not jitter the line.

Quota usage that changes colour at 70% and 90%, where the copy changes and the upgrade action appears.

Model selection in plain language: every row carries a subtitle saying what the trade is and a badge for fast, balanced or powerful, with the raw identifier kept in monospace for the people who want it.

The starter prompts on an empty assistant screen.

A microphone target whose ring reacts to real audio level, drawn in a single Canvas so 44 bars cost one draw instead of 44 layout passes.

Copy, regenerate and rate under a reply.

Files staged for sending, each with its own progress ring on the thumbnail rather than one shared bar — three uploads at three speeds cannot be described by a single percentage.

A row for the conversation list, with a timestamp that adapts to age — a time today, a weekday this week, a date beyond.