iOS UIKit components follow Apple's Human Interface Guidelines, providing native iOS patterns for navigation, controls, lists, alerts, and more. All components support light mode, dark mode, and size/state variants.
Navigation (15 components)
Navigation Bars (5 variants)
- Large Title - 375×140px, prominent title for top-level screens
- Standard - 375×88px, center-aligned title for secondary screens
- Inline - 375×88px, compact scrolled state, left-aligned
- With Back Button - 375×88px, back chevron + previous screen label
- With Actions - 375×88px, Cancel/Done buttons for modal screens
Tab Bars (4 variants)
- 3 Items - 375×83px, simple bottom navigation
- 4 Items - 375×83px, standard apps (most common)
- 5 Items - 375×83px, maximum tabs (iOS limit)
- With Badge - 375×83px, red notification badges
Search Bars (3 variants)
- Default - 343×36px, gray background with magnifying glass
- Rounded - 343×36px, fully rounded (18px radius)
- With Cancel - 375×36px, includes Cancel button
Toolbars & Page Controls (3 variants)
- Toolbar / Bottom - 375×78px, bottom action toolbar
- Toolbar / With Actions - 375×78px, multiple action icons
- Page Control / Dots - 100×20px, page indicator for carousels
Controls (25 components)
Buttons (10 variants)
- Filled - System blue background, primary actions
- Tinted - Light blue tint, secondary actions
- Gray - Neutral gray, tertiary actions
- Borderless - Text only, inline actions
- Bordered - Blue outline, alternative primary
- Destructive - Red background, delete/remove actions
- Icon - 44×44px circular, toolbar actions
- Small - 343×36px, compact interfaces
- Medium - 343×44px, standard (default)
- Large - 343×52px, prominent CTAs
Text Fields (7 variants)
- Default - Standard bordered input, 300×44px
- Rounded - Fully rounded corners (22px radius)
- Search - Gray background with search icon
- With Icon - Leading icon (📧, 📞)
- With Clear - Trailing clear (×) button
- Error - Red border for validation errors
- Disabled - Grayed out, non-interactive
Sliders, Steppers, Segmented Controls (8 variants)
- Slider / Continuous - 300×28px, standard iOS slider
- Slider / With Labels - 300×44px, min/max labels (0-100)
- Slider / Custom Thumb - 300×32px, larger 32px thumb
- Stepper / Default - 94×32px, minus/plus buttons
- Stepper / Compact - 120×32px, with value display
- Segmented Control / 2 Segments - 300×32px, binary choice
- Segmented Control / 3 Segments - 300×32px, three options
- Segmented Control / 4 Segments - 300×32px, four options
Lists & Collections (15 components)
List Items (12 variants)
- Basic - 44px, title only with bottom border
- Subtitle - 60px, title + subtitle
- Detail - 44px, title with right-aligned detail text
- Checkmark - 44px, blue checkmark (✓) on right
- Disclosure - 44px, gray chevron (›) for navigation
- Info - 44px, circle with "i" info button
- With Icon - 60px, 40px circular icon/avatar
- With Switch - 44px, iOS toggle switch
- Multi-line - 76px, title + 2 description lines
- Grouped - 44px, rounded 10px corners
- Inset Grouped - 44px, 16px inset, secondary background
- With Dividers - 132px, 3 items with separators
Collection Views (3 variants)
- Grid 2-column - 343×360px, 2×2 grid layout
- Grid 3-column - 343×360px, 2×3 compact grid
- List - 343×280px, 4 vertical items with icons
Cards, Containers & Modals (18 components)
Cards (6 variants)
- Standard - 343×160px, basic title + content
- Elevated - 343×160px, with shadow for depth
- Filled - 343×160px, filled gray background
- Image - 343×260px, image at top, text below
- With Header - 343×200px, prominent header section
- With Footer - 343×220px, action buttons at bottom
Containers (2 variants)
- Group Box - 343×200px, grouped container, secondary background
- Section Header - 343×44px, list section headers
Alerts (4 variants)
- 1-Button - 270×180px, simple alert (OK)
- 2-Button - 270×180px, Cancel/OK side by side
- 3-Button - 270×230px, three stacked options
- Destructive - 270×180px, red destructive action (Delete)
Sheets & Modals (8 variants)
- Action Sheet - 375×300px, bottom sheet with stacked buttons
- Share Sheet - 375×400px, iOS share UI with app icons
- Bottom Sheet - 375×320px, draggable with handle
- Card Modal - 343×500px, card-style rounded top
- Full Screen - 375×812px, full-screen with nav bar
- Page Sheet - 375×736px, card-style rounded corners
- Form Sheet - 343×600px, centered modal
- Popover - 280×200px, floating with arrow
Indicators (10 components)
Activity Indicators (4 variants)
- Small - 20×20px, inline loading
- Medium - 36×36px, standard (most common)
- Large - 44×44px, full-screen loading
- With Text - 100×80px, "Loading..." text below
Progress Indicators (6 variants)
- Linear Bar - 300×4px, horizontal progress
- Thin Bar - 300×2px, subtle progress
- With Labels - 300×20px, with percentage (45%)
- Ring / Small - 36×36px, compact circular
- Ring / Medium - 64×64px, standard circular
- Ring / Large - 100×100px, prominent circular
Design Specifications
Colors
- System Blue - #007AFF (primary interactive color)
- System Red - #FF3B30 (destructive actions)
- System Gray - #8E8E93 (secondary elements)
- Background - #FFFFFF (light), #000000 (dark)
- Secondary Background - #F2F2F7 (light), #1C1C1E (dark)
Typography
- Large Title - 34px bold (nav bar titles)
- Title - 17px semi-bold (standard titles)
- Body - 17px regular (main content)
- Callout - 16px regular (secondary content)
- Subhead - 15px regular (subtitles)
- Footnote - 13px regular (captions)
- Caption - 12px regular (labels)
Dimensions
- Touch Target - Minimum 44×44px (Apple HIG requirement)
- Status Bar - 44px height
- Navigation Bar - 44px content area
- Tab Bar - 49px + 34px safe area = 83px total
- List Item - Minimum 44px height
- Card Margin - 16px from screen edges (343px width on 375px screen)
- Corner Radius - 8-12px for buttons, 10px for cards
Usage Tips
- Use Large Title nav bars for top-level screens (Home, Settings)
- Use Standard nav bars for secondary/detail screens
- Maximum 5 tabs in tab bars (iOS limitation)
- Use Destructive buttons for delete/remove actions only
- Always maintain 44px minimum touch targets
- Use System Blue (#007AFF) for interactive elements
- Group related list items with Group Box containers
- Use Inset Grouped list style for modern iOS apps