Azyrom includes a comprehensive library of mobile UI components following iOS Human Interface Guidelines and Material Design 3 specifications. With automatic dark mode, size variants, and interactive states, you get ~2,000+ production-ready components.
What's Included
- 217 Base Components - iOS UIKit (85) + Material Design 3 (90) + Mobile UI (42)
- 175 Dark Mode Variants - Auto-generated from light mode components
- 450 Size Variants - Small (75%), Medium (100%), Large (125%)
- ~1,400 State Variants - Default, Hover, Active, Disabled, Focus
- 145 Professional Icons - Material Icons (71) + Font Awesome (74)
- SVG Import/Export - Drag & drop SVG files or export to SVG
Component Categories
iOS UIKit Components (85 components)
- Navigation (15) - Nav bars, tab bars, search bars, toolbars, page controls
- Controls (25) - Buttons, text fields, sliders, steppers, segmented controls
- Lists (15) - List items, collection views with various layouts
- Cards (6) - Standard, elevated, filled, with images/headers/footers
- Containers (2) - Group boxes, section headers
- Alerts (4) - 1-3 button alerts, destructive alerts
- Sheets (4) - Action sheets, share sheets, bottom sheets, card modals
- Modals (4) - Full-screen, page sheet, form sheet, popovers
- Indicators (10) - Activity indicators, progress bars, progress rings
Material Design 3 Components (90 components)
- Navigation (18) - App bars, bottom nav, navigation drawer, tabs
- Buttons (12) - Filled, outlined, text, elevated, icon buttons, FABs
- Inputs (20) - Text fields, chips, checkboxes, radio buttons, switches
- Cards (9) - Elevated, filled, outlined, with images/headers/actions
- Lists (6) - 1-3 line list items with avatars, icons, switches
- Dialogs (11) - Basic, full-screen, alert, bottom sheets, snackbars
- Progress (6) - Linear, circular, indeterminate indicators
- Badges (4) - Dot, number, large, on-icon badges
Quick Start
- Open the Components panel (right sidebar)
- Click the 📦 Mobile UI button (blue preset button)
- Components load instantly (~2,000+ components)
- Browse by category or use the search bar
- Drag components directly onto your canvas
Visual Indicators
Components display color-coded badges showing their variant types:
- Purple Badge 🟣 - Dark mode variant (moon icon)
- Blue Badge 🔵 - Size variant: S (Small) or L (Large)
- Orange Badge 🟠- Hover or Active state
- Gray Badge ⚪ - Disabled state
- Green Badge 🟢 - Focus state
Related Articles
- Quick Insert Dialog (Shift+I)
- iOS UIKit Component Guide
- Material Design 3 Component Guide
- Icon System & Icon Picker
- SVG Import & Export
- Component Variants (Dark Mode, Sizes, States)
Performance
All variants are pre-generated for instant use:
- No generation delay when browsing or using components
- Efficient storage (variants share base structure)
- Smooth scrolling with ~2,000+ components
- Search indexes all components for fast filtering
Best Practices
- Use drag & drop for precise component placement
- Design for both light and dark modes
- Include disabled states in prototypes
- Show focus states for accessibility compliance
- Use Medium size for most designs (platform standard)
- Use Large size for primary CTAs and accessibility
- Organize components by feature or screen in folders