iOS Components,
Interactive Playground

Experience Apple HIG UI components inside an iPhone mockup. Adjust styles, sizes, and colors to learn HIG principles.

40

Components

8

Categories

∞

Combinations

📄 Content 4 components

Experience Bar, Line, Area, Pie chart types and color schemes

Adjust contentMode, aspectRatio, clipShape

Font styles, line limit, truncation, Dynamic Type

WKWebView container with nav bar and progress

📐 Layout 7 components

LazyVGrid/LazyHGrid layout with adjustable columns

Disclosure Groups

Expandable/Collapsible sections and nesting levels

SF Symbol + text combinations and label styles

Plain/Inset Grouped styles with swipe actions

Hierarchical tree list with expand/collapse

NavigationSplitView sidebar + detail layout

Multi-column sortable table view

📋 Menus and Actions 8 components

ShareLink/UIActivityViewController share sheet

Filled, Tinted, Bordered, Plain styles + 3 sizes

Long press menu with icons and dividers

Cut/Copy/Paste edit menu with custom actions

Pull-down menu with icons, dividers, destructive items

Pop-up button selection indicator and styles

Pull-Down Buttons

Pull-down button items and icon configuration

Icon/text/mixed style toolbar and placement

🧭 Navigation and Search 5 components

Navigation Bars

Large/Inline title with back/trailing buttons

Search bar, scope bar, suggestions UI

NavigationSplitView sidebar with sections and badges

3-5 tab configuration with badges and selection animation

Vertical/Horizontal scrolling with paging and indicators

🪟 Presentation 5 components

Bottom sheet style action list with cancel button

1-3 button Alert with destructive action patterns

Page indicator dots with swipe navigation

Popover direction, size, and dismiss behavior

Modal sheet detent sizes and drag indicator

✏️ Selection and Input 8 components

ColorPicker wheel/grid/spectrum styles

Compact/Wheel/Graphical style comparison

Wheel, Menu, Segmented, Inline picker styles

Segmented Controls

2-5 segment selection UI with sliding animation

Continuous/stepped slider with min/max icon customization

+/- increment control with value display and range

Plain/Rounded styles with keyboard type and secure field

iOS Switch on/off animation with color customization

📈 Status 3 components

Concentric progress rings with animation and color customization

Circular/Linear gauge indicators with gradient

Progress Indicators

ProgressView linear/circular styles with progress control