PrettyUI

Beautiful SwiftUI components and design system

What this skill does

PrettyUI is a production-ready SwiftUI component library that provides 14 polished components with built-in animations, accessibility features, and consistent design tokens. It solves the common problem of building beautiful, cohesive interfaces across Apple platforms by providing pre-built components that follow modern design principles and include proper VoiceOver support, Dynamic Type scaling, and Reduce Motion handling.

The library implements a comprehensive design token system for colors, spacing, typography, border radius, and shadows, allowing teams to maintain visual consistency while customizing the appearance. It includes four professionally designed themes (Sky, Indigo, Emerald, Amber) inspired by Family.co's interface design, with fluid animations and pixel-perfect details that elevate standard SwiftUI components.

Unlike basic UI kits, PrettyUI is architected for real-world production use with zero external dependencies, multi-platform compatibility, and a focus on performance. It integrates seamlessly with existing SwiftUI apps through modifier-based theming and follows SwiftUI's declarative patterns.

Prerequisites

• Xcode 14.0 or later
• Swift 5.7+
• iOS 16.0+ / macOS 13.0+ / tvOS 16.0+ / watchOS 9.0+
• SwiftUI knowledge (basic View composition and state management)
• Swift Package Manager for installation

Quick start

Install via Swift Package Manager:

https://github.com/ajagatobby/PrettyUI.git

Configure theme in your app:

import SwiftUI
import PrettyUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .prettyTheme(.sky)
        }
    }
}

Build your first interface:

struct ContentView: View {
    @State private var email = ""
    @State private var showToast = false

    var body: some View {
        VStack(spacing: 24) {
            PTextField("Email", text: $email)
                .leadingIcon("envelope")

            PButton("Subscribe") {
                showToast = true
            }
            .variant(.primary)
            .fullWidth()
        }
        .padding()
        .pToastContainer()
        .onChange(of: showToast) { _, show in
            if show {
                PToastManager.shared.show("Subscribed!", variant: .success)
                showToast = false
            }
        }
    }
}

Core concepts

Design Tokens: PrettyUI uses a token-based design system where colors, spacing, typography, and other visual properties are defined centrally and referenced throughout components. This ensures consistency and makes theming straightforward.

Theme System: Themes are complete design token collections that transform the entire interface. The four built-in themes (Sky, Indigo, Emerald, Amber) provide different color palettes and styling approaches suitable for various app categories.

Component Variants: Most components support multiple variants (primary, secondary, outline, ghost) that provide different visual treatments while maintaining consistent behavior and accessibility features.

Modifier-Based API: Components use SwiftUI modifier patterns for configuration, allowing you to chain styling options like .variant(.primary).fullWidth().leadingIcon("star") in a readable, discoverable way.

Multi-Platform Adaptation: Components automatically adapt to different Apple platforms, handling platform-specific interaction patterns, sizing constraints, and visual conventions without additional code.

Key components

Common patterns

Form with validation:

VStack(spacing: 16) {
    PTextField("Email", text: $email)
        .leadingIcon("envelope")
        .variant(emailValid ? .default : .error)
    
    PTextField("Password", text: $password)
        .leadingIcon("lock")
        .isSecure(true)
    
    PButton("Sign In") { signIn() }
        .variant(.primary)
        .fullWidth()
        .disabled(!formValid)
}

Card-based layout:

PCard {
    VStack(alignment: .leading, spacing: 12) {
        Text("Title").font(.headline)
        Text("Description").font(.body)
        
        HStack {
            PBadge("New").variant(.success)
            Spacer()
            PButton("Action") { }
        }
    }
}
.variant(.elevated)

Toast notifications:

.pToastContainer()
.onAppear {
    PToastManager.shared.show(
        "Welcome back!",
        variant: .success,
        duration: 3.0
    )
}

Custom theme colors:

PButton("Custom") { }
    .variant(.primary)
    .prettyTheme(.custom(
        primary: Color.purple,
        secondary: Color.pink
    ))

Theming and customization

Built-in themes:

• .sky - Vibrant cyan-blue (#1DA1F2) for social apps
• .indigo - Deep purple (#6366F1) for productivity
• .emerald - Fresh green (#10B981) for health/wellness
• .amber - Warm orange (#F59E0B) for creative apps

Apply themes at app or view level:

ContentView()
    .prettyTheme(.indigo)

Access design tokens:

@Environment(\.prettyTheme) var theme

Text("Styled text")
    .foregroundColor(theme.colors.primary)
    .font(theme.typography.headline)

Best practices

1. Apply theme at app root - Use .prettyTheme() on your main ContentView to ensure consistent theming across the entire app
2. Use semantic variants - Prefer .variant(.primary) over custom colors to maintain theme consistency
3. Combine with native SwiftUI - PrettyUI components work alongside standard SwiftUI views seamlessly
4. Leverage fullWidth modifier - Use .fullWidth() on buttons and text fields for consistent form layouts
5. Handle toast container properly - Add .pToastContainer() to parent views that will show toasts, not individual components
6. Test accessibility - Components include VoiceOver support, but test with actual assistive technologies
7. Use appropriate variants - Match component variants to your content hierarchy (primary for main actions, secondary for supporting actions)

Gotchas and common mistakes

• Missing toast container: Calling PToastManager.shared.show() without .pToastContainer() on a parent view will not display toasts
• Theme not propagating: Applying .prettyTheme() to individual components instead of parent views breaks consistency
• Platform compatibility: Some styling may appear different on macOS/tvOS - test on all target platforms
• State binding confusion: PrettyUI components use standard SwiftUI binding patterns, not custom binding types
• Icon name requirements: Icon modifiers expect SF Symbols names, not custom image names
• Variant conflicts: Setting both .variant() and manual styling can cause visual inconsistencies
• Animation performance: Complex nested PrettyUI components may impact performance on older devices
• Accessibility override: Manually setting accessibility properties may conflict with built-in accessibility features
• Theme switching: Changing themes at runtime requires proper state management to avoid layout glitches
• Import requirements: Must import PrettyUI in every file using the components, not just the app file