> ## Documentation Index
> Fetch the complete documentation index at: https://learn.social.plus/llms.txt
> Use this file to discover all available pages before exploring further.

# UIKit Customization

> Comprehensive guide to customizing social.plus UIKit components to match your brand

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

<CardGroup cols={3}>
  <Card title="Dynamic UI" icon="palette" href="/uikit/customization/dynamic-ui">
    **Minimal Customization**

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

  <Card title="Component Styling" icon="paintbrush" href="/uikit/customization/component-styling">
    **Moderate Customization**

    * Custom CSS and styling overrides
    * Advanced theming options
    * Component-level modifications
    * Still within UIKit framework
  </Card>

  <Card title="Fork & Extend" icon="code-fork" href="/uikit/customization/advanced-customization">
    **Advanced Customization**

    * Complete control over components
    * Custom layouts and workflows
    * Maintain your own version
    * Jumpstart for complex projects
  </Card>
</CardGroup>

<Info>
  **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.
</Info>

***

## Level 1: Dynamic UI - Minimal Cacheustomization

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

<CardGroup cols={2}>
  <Card title="Configuration-Based" icon="file-code" href="/uikit/customization/dynamic-ui">
    **Single config.json File**

    * Centralized customization
    * Light and dark themes
    * Brand colors and typography
    * No app updates required
  </Card>

  <Card title="Real-time Updates" icon="wand-magic-sparkles" href="/uikit/customization/dynamic-ui">
    **Live Configuration**

    * Instant theme switching
    * A/B testing capabilities
    * Remote configuration
    * Version control friendly
  </Card>
</CardGroup>

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

***

## Level 2: Component Styling - Moderate Customization

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

<CardGroup cols={2}>
  <Card title="Advanced Theming" icon="paintbrush" href="/uikit/customization/theming-basics">
    **CSS & Style Overrides**

    * Custom stylesheets
    * Component-specific styling
    * Advanced color schemes
    * Typography control
  </Card>

  <Card title="Component Control" icon="puzzle-piece" href="/uikit/customization/component-styling">
    **Granular Customization**

    * Individual component styling
    * Page-specific themes
    * Element-level customization
    * Conditional styling
  </Card>
</CardGroup>

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

***

## Level 3: Fork & Extend - Advanced Customization

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

<CardGroup cols={2}>
  <Card title="Complete Control" icon="code-fork" href="https://github.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource">
    **Fork GitHub Repository**

    * Access to full source code
    * Modify any component or workflow
    * Custom layouts and interactions
    * Unlimited customization freedom
  </Card>

  <Card title="Maintain Your Version" icon="code-branch" href="/uikit/customization/advanced-customization">
    **Full Ownership**

    * Your own codebase
    * Custom feature development
    * Integration with existing systems
    * Professional development workflow
  </Card>
</CardGroup>

**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

***

## Decision Matrix

| Goal / Constraint                                | Dynamic UI | Component Styling | Fork & Extend |
| ------------------------------------------------ | ---------- | ----------------- | ------------- |
| Rebrand colors quickly                           | ✅          | ✅                 | Overkill      |
| Per-component styling                            | ❌          | ✅                 | ✅ (more cost) |
| New flow / navigation paradigm                   | ❌          | ⚠️ Limited        | ✅             |
| Replace data layer / inject custom services      | ❌          | ❌                 | ✅             |
| Deep performance tuning / virtualization changes | ❌          | ❌                 | ✅             |
| Add brand-new primitive (e.g. Custom feed)       | ❌          | ❌                 | ✅             |
| Minimal maintenance capacity                     | ✅          | ✅                 | ❌             |

## Taxonomy: Elements → Components → Pages

<AccordionGroup>
  <Accordion title="UI Elements (Atoms)">
    Primitive building blocks (buttons, text, avatar). Light logic. Style mostly via tokens; rarely stateful beyond hover / active / disabled.
  </Accordion>

  <Accordion title="Components (Presentational vs Controller)">
    <strong>Presentational</strong>: Compose elements; focus on layout / visuals.

    <br />

    <strong>Controller</strong>: Contain orchestration logic (e.g. data fetch, pagination). Examples: <code>FeedList</code>, <code>PostView</code>.
  </Accordion>

  <Accordion title="Pages (Screens)">
    Route-level surfaces combining multiple controller/components with navigation context.
  </Accordion>
</AccordionGroup>

<Info>
  **Need Help with Customization?**

  Our design team is available to help you create the perfect look for your app. [Contact our customization experts](https://support.socialplus.com) for personalized assistance.
</Info>