SwiftUI Settings & Preferences
Build native iOS settings pages with SwiftUI: LabeledContent formatters, switch toggles, grouped list rows, navigation links, and system preference pickers. (85 production-ready components).
Button for Copying
Smart copy button that temporarily switches icon and text to "Copied!" with tactile haptic feedback.
Bordered Green Rounded Button (Regular)
Standard-sized bordered button with custom green tint and continuous rounded corners.
Bordered Green Rounded Button (Mini)
Compact mini bordered button for tight layouts, list items, and secondary badges.
Bordered Green Rounded Button (Small)
Small bordered action button with green rounded rectangle styling.
Bordered Green Rounded Button (Large)
Large prominent bordered button with custom green styling.
Bordered Green Rounded Button (Extra Large)
Extra-large full-width bordered action button with rounded rectangle styling.
Icon Button (Small)
Small circular icon-only button for compact toolbars and cards.
Icon Button (Regular)
Standard-sized icon-only button with circular background padding.
Icon Button (Large)
Large circular icon button for floating actions and primary media controls.
Icon Button (Extra Large)
Extra-large hero icon button for prominent media playback or recording.
Prominent Button (Small)
Small filled capsule button for quick inline actions.
Prominent Button (Regular)
Standard-sized filled prominent button with smooth corner radius.
Prominent Button (Large)
Large filled prominent button for main user interactions.
Prominent Button (Extra Large)
Extra-large filled prominent button for hero headers.
Prominent Destructive Button (Large)
Prominent destructive action button in system red for critical deletion confirmations.
Prominent Destructive Icon Button (Large)
Large icon-only destructive button for deletion triggers in toolbars.
Stat Tile Button with Inflection
Dashboard metric card button featuring dynamic English pluralization and inflection rules.
Secondary Button Large (Custom Style)
Large customized secondary button with custom padding and background fill.
Secondary Button Medium (Custom Style)
Medium customized secondary button with modern rounded styling.
Subscription Button Simple
Dedicated recurring billing / subscription purchase button with StoreKit pricing labels.
Update Button
App update trigger button with version badge and leading icon.
Done Button
Toggleable completion button with smooth checkmark state transition.
Open Settings Button
One-tap navigation trigger that opens the app’s system settings directly in iOS Settings.
Sign in with Apple Button
Native Apple Authentication button following Apple Human Interface Guidelines.
Text with Number Inflection Rules
Dynamic text demonstrating automatic localized pluralization syntax (^[(count) item](inflect: true)).
Text with Markdown Links
Rich text demonstrating inline markdown links, bolding, italics, and custom link styling.
Text with Dashed Stroke
Decorative heading enclosed in a dashed border stroke.
Text System Default Variants
Showcase of standard San Francisco system font weights and designs.
Text System Monospace Variants
Showcase of SF Mono typography for code, data, and numeric readouts.
Text System Rounded Variants
Showcase of SF Pro Rounded typography for friendly, consumer-facing interfaces.
Text System Serif Variants
Showcase of New York serif typography for editorial and reading experiences.
Text Style Default Variants
Comprehensive typography hierarchy showcase (Large Title down to Caption 2).
Text Date Styling Options
Built-in date/time text formatting variants (relative, timer, date, offset).
Text Styling Default Options
Text transformation samples (strikethrough, underline, kerning, baseline offset).
Text Truncation Modes
Comparison of .head, .middle, and .tail text truncation behaviors.
Text with Gradient
Headline text masked with a multi-stop linear gradient fill.
Relative Date Text
Automatically updating relative time formatting (e.g. "2 hours ago", "in 3 days").
Text Sequence with Timer
Dynamic text that cycles through a sequence of strings automatically using a timer.
Monospace Expandable Text
Monospaced code/log snippet with tap-to-expand card layout.
Banner with Laurels
Social-proof accolade banner framed with celebratory laurel branch icons.
Banner with Laurels & Long Text
Expanded award/feature banner with multi-line testimonial copy.
Banner with Laurels & Expandable Text
Compact laurel banner with collapsible review text and "Read more" toggle.
Review Banner Basic
Star-rating and customer feedback highlight card for paywalls and home screens.
User Rating Banner
Engaging rating prompt banner encouraging user App Store reviews.
What's New Banner with Button
Release highlight card with feature icon, release notes, and action button.
Product Banner with Overlay
Hero media banner with gradient overlay, title, and quick-favorite heart button.
Promo Banner with Custom Gradient
Eye-catching promotional container with vibrant multi-color gradient fills.
Banner with Action – TipKit Style
Native TipKit-style contextual recommendation banner with action and dismiss triggers.
Settings List Row Label Basic
Standard iOS settings navigation row with SF symbol and title.
Settings LabeledContent List Row
Settings row with title and right-aligned detail text using LabeledContent.
Settings Row with Custom LabeledContent
Rich settings item with custom badge and secondary status text.
LabeledContent with Formatters
Row displaying formatted values (currency, bytes, percentages, measurements).
List Row Compact with Title, Subtitle & Detail
3-tier information row with leading icon, title, subtitle, and trailing value.
Disclosure Group as FAQ
Accordion-style expandable/collapsible FAQ item with chevron animation.
FAQ List with Disclosure Groups
Complete multi-item expandable FAQ section for help screens.
Footer Basic
Minimal app version and copyright text footer for settings lists.
Avatar Basic 62x62
Standard circular profile picture placeholder.
Contact Avatar 62x62
Contact avatar with initials badge and status indicator.
Profile Picture with PhotoPicker
Interactive avatar with PhotosUI PhotosPicker integration for instant photo changes.
Profile Avatar Circle
Clean circular avatar with customizable image clipping and shadow.
Profile Avatar Rounded Rectangle
Modern squircle/rounded-rect avatar for contemporary dashboard designs.
Name Avatar with Random Color
Initials avatar with deterministic or randomized gradient backgrounds.
Icon with Background
Square rounded icon with solid background color for settings menus.
Icon with Gradient Background
SF Symbol on top of a smooth linear gradient background.
Icon with Stroke
SF Symbol enclosed in a colored border stroke container.
App Icon 60x60
Pixel-perfect 60x60 app icon showcase container.
App Icon 75x75 using AppIcon
Dynamically loaded main application icon container with standard iOS corner radius.
Badge with Symbol & Palette Rendering
Notification badge utilizing SF Symbol multi-tone palette colors.
Badge with Symbol & Linear Gradient
Pill badge with symbol and gradient fill for Pro features and tags.
Link Row Settings
Settings row that opens external Safari URLs with an external link indicator.
Link as Icon
Compact icon-only external URL link button.
Link as Button
Fully styled SwiftUI button that triggers web URL opening.
Link as Markdown Text with Emoji
Inline text link styled with emojis and markdown parsing.
App Store ShareLink
Native iOS ShareLink configured to share the app's App Store download link.
Promo Banner as NavigationLink (Narrow)
Slim promotional navigation banner directing users to feature deep-dives.
Banner NavigationLink with Symbol
Interactive banner row with prominent leading SF Symbol and disclosure arrow.
Banner NavigationLink with Person Image
Navigation banner featuring profile artwork and call-to-action text.
Benefit Row Basic
Single paywall feature row with colored checkmark and benefit description.
Pro Benefits VStack with Bounce
Complete paywall feature list with cascading spring-in bounce animations.
Subscription Plan Choice with Checkmark
Selectable pricing tier card (Monthly vs. Annual) with radio checkmark and "Save 50%" tag.
Image with Custom Mask
Image clipped with custom shape masks (stars, shields, rounded shapes).
Image with Scale Effect Animation
Hero image with interactive tap-to-zoom spring animation.
Label Basic with Icon
Standard Label component with system symbol and title.
Label with Text Icon
Label pairing a text badge/tag with main description copy.
Label with Person Initials
Label featuring user initials monogram in place of an image.
Explore Other Curated SwiftUI Collections
Onboarding & Welcome Screens
Crafted SwiftUI Onboarding Screens, Welcome Flows & Feature Walkthroughs
Paywalls & Subscriptions
High-Converting SwiftUI Paywall Views, Plan Selectors & Benefit Rows
Dashboards & Analytics
SwiftUI KPI Stat Tiles, Circular Progress Gauges & Data Displays
Account & User Profiles
SwiftUI Profile Avatars, PhotosPicker & User Badges