Component Styling (Moderate Customization)

For teams who need deeper styling control while staying within the UIKit framework. Component Styling allows you to override CSS, customize individual components, and implement advanced theming.

CSS Control

Override styles with custom CSS

Component Targeting

Customize specific components and pages

Advanced Theming

Complex color schemes and typography

UIKit Framework

Still within the UIKit ecosystem

When to Choose Component Styling

Component Styling is ideal when you need: ✅ Custom brand experiences - Beyond basic colors and fonts
✅ Granular control - Target specific components or pages
✅ Advanced theming - Complex color schemes and typography
✅ CSS expertise - Team has frontend styling knowledge
✅ Framework benefits - Want to stay within UIKit’s ecosystem ❌ Simple branding - Dynamic UI is easier for basic needs
❌ Complex layouts - Fork & Extend offers more freedom
❌ Custom components - Need source code access for new components

Component Targeting System

UIKit uses a hierarchical path system to target specific components for customization. The format follows this pattern:

page_name/instance/component_name

Page Name

The specific page or screen

Instance

Specific instance or wildcard (*)

Component

The component within that page

Common Page Names

Social Components

Chat Components

Story Components

Customization Examples

Page-Level Customization

Customize an entire page’s appearance:

{
  "customizations": {
    "social_home_page/*/*": {
      "page_theme": {
        "light_theme": {
          "background_color": "#F8F9FA",
          "primary_color": "#007AFF"
        },
        "dark_theme": {
          "background_color": "#1C1C1E",
          "primary_color": "#0A84FF"
        }
      }
    }
  }
}

Component-Specific Styling

Target individual components within pages:

{
  "customizations": {
    "post_detail_page/*/reaction_button": {
      "config": {
        "reaction_enabled": true,
        "like_enabled": true,
        "comment_enabled": true
      },
      "style": {
        "button_color": "#FF3B30",
        "active_color": "#FF2D20"
      }
    },
    "social_home_page/*/post_header": {
      "style": {
        "background_color": "transparent",
        "text_color": "#1D1D1F"
      }
    }
  }
}

Global Component Styling

Apply styles across all instances of a component:

{
  "customizations": {
    "*/*/*/avatar": {
      "style": {
        "border_width": 2,
        "border_color": "#007AFF",
        "corner_radius": 20
      }
    }
  }
}

Common Component Types

Button Components

"*/*/primary_button": {
  "style": {
    "background_color": "#007AFF",
    "text_color": "#FFFFFF",
    "corner_radius": 8,
    "border_width": 0
  }
}

Text Components

"*/*/header_text": {
  "style": {
    "text_color": "#1D1D1F",
    "font_size": 17,
    "font_weight": "semibold"
  }
}

Input Components

{
  "*/*/text_input": {
    "style": {
      "background_color": "#F2F2F7",
      "text_color": "#1D1D1F",
      "placeholder_color": "#8E8E93",
      "corner_radius": 10,
      "border_width": 0
    }
  }
}

Advanced Component Features

Conditional Styling

Apply different styles based on component state:

{
  "post_detail_page/*/like_button": {
    "style": {
      "default": {
        "background_color": "transparent",
        "text_color": "#8E8E93"
      },
      "active": {
        "background_color": "#FF3B30",
        "text_color": "#FFFFFF"
      },
      "disabled": {
        "background_color": "#F2F2F7",
        "text_color": "#C7C7CC"
      }
    }
  }
}

Component Configuration

Control component behavior along with styling:

{
  "social_home_page/*/post_composer": {
    "config": {
      "max_characters": 500,
      "image_upload_enabled": true,
      "video_upload_enabled": false,
      "poll_creation_enabled": true
    },
    "style": {
      "background_color": "#FFFFFF",
      "corner_radius": 12,
      "shadow_enabled": true
    }
  }
}

Animation Settings

Customize component animations:

{
  "*/*/modal_transition": {
    "animation": {
      "type": "slide_up",
      "duration": 0.3,
      "easing": "ease_out"
    }
  }
}

Platform-Specific Styling

iOS-Specific Properties

{
  "ios": {
    "*/*/navigation_bar": {
      "style": {
        "blur_effect": "regular",
        "large_title_enabled": true,
        "prefersLargeTitles": true
      }
    }
  }
}

Android-Specific Properties

{
  "android": {
    "*/*/toolbar": {
      "style": {
        "elevation": 4,
        "navigation_icon_enabled": true,
        "title_centered": false
      }
    }
  }
}

Web-Specific Properties

{
  "web": {
    "*/*/scrollable_content": {
      "style": {
        "scrollbar_width": "thin",
        "scrollbar_color": "#C7C7CC",
        "overflow_behavior": "smooth"
      }
    }
  }
}

Component Categories

Post Components

Interaction Components

User Components

Chat Components

Message Components

Input Components

Story Components

Story Display

Story Creation

Validation and Testing

Style Validation

Ensure your component styles are valid:

Syntax Check

Validate JSON syntax in your config file

Component Paths

Verify component paths exist in your UIKit version

Color Formats

Use valid hex colors (#RRGGBB or #RRGGBBAA)

Numeric Values

Ensure numeric properties use appropriate ranges

Cross-Platform Testing

Mobile Testing

Test on various screen sizes and orientations

Platform Differences

Account for iOS/Android/Web design differences

Theme Testing

Verify both light and dark theme compatibility

Accessibility

Ensure sufficient contrast and touch targets

Best Practices

Always test component customizations thoroughly across all supported platforms and themes.

Design Guidelines

Consistency

Maintain visual consistency across similar components

Accessibility

Ensure adequate contrast and touch target sizes

Performance

Avoid overly complex styles that impact performance

Maintainability

Use systematic naming and organization

Configuration Management

{
  "// Comments": "Use comments to document your customizations",
  "customizations": {
    "// Social Feed Customizations": "",
    "social_home_page/*/*": {
      "// Global social feed styling": ""
    },
    
    "// Chat Customizations": "",
    "chat_home_page/*/*": {
      "// Chat list styling": ""
    }
  }
}

Powered by

Getting Started

Components

Customization

Examples

​Component Styling (Moderate Customization)

CSS Control

Component Targeting

Advanced Theming

UIKit Framework

​When to Choose Component Styling

​Component Targeting System

Page Name

Instance

Component

​Common Page Names

​Customization Examples

​Page-Level Customization

​Component-Specific Styling

​Global Component Styling

​Common Component Types

​Button Components

​Text Components

​Input Components

​Advanced Component Features

​Conditional Styling

​Component Configuration

​Animation Settings

​Platform-Specific Styling

​iOS-Specific Properties

​Android-Specific Properties

​Web-Specific Properties

​Component Categories

​Social Feed Components

​Chat Components

​Story Components

​Validation and Testing

​Style Validation

​Cross-Platform Testing

Mobile Testing

Platform Differences

Theme Testing

Accessibility

​Best Practices

​Design Guidelines

Consistency

Accessibility

Performance

Maintainability

​Configuration Management

​Next Steps

Advanced Customization

Platform Guides

Component Styling (Moderate Customization)

When to Choose Component Styling

Component Targeting System

Common Page Names

Customization Examples

Page-Level Customization

Component-Specific Styling

Global Component Styling

Common Component Types

Button Components

Text Components

Input Components

Advanced Component Features

Conditional Styling

Component Configuration

Animation Settings

Platform-Specific Styling

iOS-Specific Properties

Android-Specific Properties

Web-Specific Properties

Component Categories

Social Feed Components

Chat Components

Story Components

Validation and Testing

Style Validation

Cross-Platform Testing

Best Practices

Design Guidelines

Configuration Management

Next Steps