Help

1 min read

Components

Once you are happy with the configuration of your foundation elements, you can make changes to the way visual components are displayed in your app.

Generated Attributes

There are some visual elements chosen automatically by the Poq platform. These are shown for each component in the right hand column.

Quick Start

New to component styling? Start with the most commonly customized elements:

  1. Buttons - Primary, secondary, and action buttons
  2. Navigation Bar - Top navigation styling
  3. Tab Bar - Bottom navigation tabs

UI Components

Customize the visual appearance of these interface elements:

Navigation & Controls

Interactive Elements

  • Buttons - Primary, secondary, and action buttons

Additional interactive element styling documentation will be added in future releases.

How Component Styling Works

Foundation Integration:

  • Components inherit colors from your foundation elements
  • Customizations override foundation defaults
  • Changes apply across all instances of the component

Styling Process:

  1. Select component type from the list
  2. Choose specific variant (e.g., Primary button)
  3. Customize colors and appearance
  4. Preview changes in the central column
  5. Save to apply across your app

Color Hierarchy

Components follow your app's color hierarchy by default:

  • Primary colors - Main brand colors for important actions
  • Secondary colors - Supporting brand colors for secondary actions
  • Background colors - Container and surface colors
  • Text colors - Label and content text colors

Platform Considerations

iOS Components:

  • Follow iOS design guidelines
  • Support iOS 11+ large title navigation
  • Adaptive color support for dark mode

Android Components:

  • Material Design principles
  • Platform-appropriate styling
  • Consistent with Android UI patterns

Best Practices

Color Selection

✅ Maintain contrast - Ensure text is readable on backgrounds
✅ Brand consistency - Use colors from your foundation palette
✅ Accessibility - Follow WCAG guidelines for color contrast

Component Hierarchy

✅ Primary buttons - Most important actions (Add to Cart, Buy Now)
✅ Secondary buttons - Supporting actions (Save, Share)
✅ Navigation - Consistent styling across all screens

Testing

✅ Preview thoroughly - Check all component variants
✅ Test on devices - Verify appearance on actual mobile devices
✅ Dark mode - Ensure components work in dark mode if supported

What's Next?