UIKit Customization

social.plus UIKit offers three levels of customization to match your needs. Choose the right approach based on how much control you need over the user interface.

Choose Your Customization Level

Dynamic UI

Minimal Customization

Colors, text, and basic styling
No code changes required
Perfect for brand consistency
Real-time updates without app releases

Component Styling

Moderate Customization

Custom CSS and styling overrides
Advanced theming options
Component-level modifications
Still within UIKit framework

Fork & Extend

Advanced Customization

Complete control over components
Custom layouts and workflows
Maintain your own version
Jumpstart for complex projects

Start simple and scale up: Begin with Dynamic UI for quick brand consistency, move to Component Styling for deeper control, or Fork & Extend when you need complete customization freedom.

1. Dynamic UI

Perfect for teams who want to quickly customize colors, text, and basic styling without writing any code.

Configuration-Based

Single config.json File

Centralized customization
Light and dark themes
Brand colors and typography
No app updates required

Real-time Updates

Live Configuration

Instant theme switching
A/B testing capabilities
Remote configuration
Version control friendly

Best for: Quick launches, MVPs, brand consistency, teams without deep frontend expertise.

2. Component Styling

For teams who need deeper styling control while staying within the UIKit framework.

Advanced Theming

CSS & Style Overrides

Custom stylesheets
Component-specific styling
Advanced color schemes
Typography control

Component Control

Granular Customization

Individual component styling
Page-specific themes
Element-level customization
Conditional styling

Best for: Custom brand experiences, unique styling requirements, teams with frontend expertise.

3. Fork & Extend

For teams who need complete control over components and user flows.

Complete Control

Fork GitHub Repository

Access to full source code
Modify any component or workflow
Custom layouts and interactions
Unlimited customization freedom

Maintain Your Version

Full Ownership

Your own codebase
Custom feature development
Integration with existing systems
Professional development workflow

Best for: Complex custom requirements, existing app integration, teams with strong development resources.

When to Fork & Extend

Consider forking when you need:

Custom user flows that don’t exist in UIKit
Integration with complex existing systems
Unique layouts that can’t be achieved with styling
Complete control over the development roadmap

🚀 Quick Start

Basic Configuration

Get started with customization using a simple config.json file:

{
  "preferred_theme": "light",
  "theme": {
    "light": {
      "primary_color": "#1054DE",
      "secondary_color": "#292B32",
      "background_color": "#FFFFFF",
      "text_color": "#000000"
    },
    "dark": {
      "primary_color": "#1054DE",
      "secondary_color": "#292B32",
      "background_color": "#191919",
      "text_color": "#FFFFFF"
    }
  }
}

Apply Configuration

import { UIKitProvider } from '@socialplus/uikit-react';
import config from './config.json';

function App() {
  return (
    <UIKitProvider config={config}>
      {/* Your app components */}
    </UIKitProvider>
  );
}

🎯 Customization Levels

1. Global Theme

Apply consistent styling across all components:

{
  "theme": {
    "light": {
      "primary_color": "#1054DE",
      "secondary_color": "#292B32",
      "base_color": "#292b32",
      "base_shade1_color": "#636878",
      "base_shade2_color": "#898e9e",
      "base_shade3_color": "#a5a9b5",
      "base_shade4_color": "#ebecef",
      "alert_color": "#FA4D30",
      "background_color": "#FFFFFF"
    }
  }
}

2. Component-Specific Customization

Target specific components or pages:

{
  "customizations": {
    "social_feed/*/*": {
      "page_theme": {
        "light_theme": {
          "primary_color": "#FF6B6B",
          "background_color": "#F8F9FA"
        }
      }
    },
    "chat_conversation/*/*": {
      "title": "Messages",
      "show_avatar": true,
      "message_bubble_style": "rounded"
    }
  }
}

3. Element-Level Control

Fine-tune individual UI elements:

{
  "customizations": {
    "social_feed/*/post_item": {
      "border_radius": 12,
      "shadow_enabled": true,
      "padding": 16
    },
    "chat_conversation/*/send_button": {
      "background_color": "#1054DE",
      "icon_color": "#FFFFFF",
      "size": "large"
    }
  }
}

🌟 Dynamic UI

Real-time Customization

Update your app’s appearance without releasing new versions:

Configure Dynamic UI

Enable Dynamic UI in your social.plus console dashboard

Sync Configuration

Call the sync method in your app to fetch latest customizations

Apply Changes

UIKit automatically applies the new configuration

Test & Publish

Preview changes and publish when ready

Implementation

import { SocialPlusUIKit } from '@socialplus/uikit-react';

// Sync dynamic configuration
async function syncCustomization() {
  try {
    await SocialPlusUIKit.syncNetworkConfig();
    console.log('Customization updated successfully');
  } catch (error) {
    console.error('Failed to sync customization:', error);
  }
}

// Call on app start or when needed
syncCustomization();

🎨 Design System

Color Palette

UIKit uses a systematic color approach:

Color Token	Purpose	Light Theme	Dark Theme
`primary_color`	Brand color, buttons, links	`#1054DE`	`#1054DE`
`secondary_color`	Secondary actions	`#292B32`	`#292B32`
`background_color`	Main background	`#FFFFFF`	`#191919`
`base_color`	Primary text	`#292b32`	`#ebecef`
`base_shade1_color`	Secondary text	`#636878`	`#a5a9b5`
`alert_color`	Errors, warnings	`#FA4D30`	`#FA4D30`

Typography

Customize text styles across components:

{
  "typography": {
    "heading1": {
      "font_size": 28,
      "font_weight": "bold",
      "line_height": 1.2
    },
    "body": {
      "font_size": 16,
      "font_weight": "normal",
      "line_height": 1.4
    },
    "caption": {
      "font_size": 12,
      "font_weight": "normal",
      "line_height": 1.3
    }
  }
}

Spacing & Layout

Control spacing and layout properties:

{
  "layout": {
    "padding": {
      "small": 8,
      "medium": 16,
      "large": 24
    },
    "border_radius": {
      "small": 4,
      "medium": 8,
      "large": 12
    }
  }
}

🛠️ Advanced Customization

Custom Assets

Replace default icons and images:

{
  "assets": {
    "icons": {
      "like_icon": "https://your-cdn.com/icons/heart.png",
      "comment_icon": "https://your-cdn.com/icons/comment.png"
    },
    "images": {
      "default_avatar": "https://your-cdn.com/avatars/default.png",
      "empty_state": "https://your-cdn.com/images/empty.png"
    }
  }
}

Animation Customization

Control animation behavior:

{
  "animations": {
    "transition_duration": 300,
    "easing": "ease-in-out",
    "enable_page_transitions": true,
    "enable_micro_interactions": true
  }
}

Platform-Specific Overrides

Apply different styles per platform:

{
  "platform_overrides": {
    "ios": {
      "navigation_bar_style": "large_title",
      "tab_bar_style": "translucent"
    },
    "android": {
      "status_bar_color": "#1054DE",
      "navigation_bar_color": "#FFFFFF"
    },
    "web": {
      "enable_desktop_layout": true,
      "max_content_width": 1200
    }
  }
}

📱 Responsive Design

Breakpoints

UIKit automatically adapts to different screen sizes:

Breakpoint	Width	Use Case
Mobile	< 768px	Phone portrait/landscape
Tablet	768px - 1024px	Tablet portrait/landscape
Desktop	> 1024px	Desktop and large screens

Adaptive Layouts

Components automatically adjust their layout:

{
  "responsive": {
    "mobile": {
      "columns": 1,
      "sidebar_collapsed": true
    },
    "tablet": {
      "columns": 2,
      "sidebar_collapsed": false
    },
    "desktop": {
      "columns": 3,
      "sidebar_collapsed": false,
      "max_width": 1200
    }
  }
}

🧪 Testing Customization

Preview Mode

Test customizations before applying:

Development Mode: Test locally with config files
Staging Environment: Test with Dynamic UI in staging
A/B Testing: Compare different themes with real users
Rollback: Quickly revert to previous configurations

Best Practices

🎨 Design Consistency

⚡ Performance

🔧 Maintenance

👥 User Experience

📚 Next Steps

Ready to customize your UIKit? Here’s what to explore next:

Theming Basics

Learn the fundamentals of UIKit theming and configuration

Dynamic UI

Set up real-time customization with Dynamic UI

Component Styling

Deep dive into component-specific customization

Advanced Features

Explore advanced customization techniques

Need Help with Customization?Our design team is available to help you create the perfect look for your app. Contact our customization experts for personalized assistance.

Powered by

Getting Started

Components

Customization

Examples

​UIKit Customization

​Choose Your Customization Level

Dynamic UI

Component Styling

Fork & Extend

​1. Dynamic UI

Configuration-Based

Real-time Updates

​2. Component Styling

Advanced Theming

Component Control

​3. Fork & Extend

Complete Control

Maintain Your Version

​When to Fork & Extend

​🚀 Quick Start

​Basic Configuration

​Apply Configuration

​🎯 Customization Levels

​1. Global Theme

​2. Component-Specific Customization

​3. Element-Level Control

​🌟 Dynamic UI

​Real-time Customization

​Implementation

​🎨 Design System

​Color Palette

​Typography

​Spacing & Layout

​🛠️ Advanced Customization

​Custom Assets

​Animation Customization

​Platform-Specific Overrides

​📱 Responsive Design

​Breakpoints

​Adaptive Layouts

​🧪 Testing Customization

​Preview Mode

​Best Practices

​📚 Next Steps

Theming Basics

Dynamic UI

Component Styling

Advanced Features

UIKit Customization

Choose Your Customization Level

1. Dynamic UI

2. Component Styling

3. Fork & Extend

When to Fork & Extend

🚀 Quick Start

Basic Configuration

Apply Configuration

🎯 Customization Levels

1. Global Theme

2. Component-Specific Customization

3. Element-Level Control

🌟 Dynamic UI

Real-time Customization

Implementation

🎨 Design System

Color Palette

Typography

Spacing & Layout

🛠️ Advanced Customization

Custom Assets

Animation Customization

Platform-Specific Overrides

📱 Responsive Design

Breakpoints

Adaptive Layouts

🧪 Testing Customization

Preview Mode

Best Practices

📚 Next Steps