> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Customizing Your UI Kit Builder

> Customize CometChat UI Kit Builder components — modify props, styling, and behavior for iOS.

The `CometChatBuilderSettings` object handles feature toggles and styling configuration. For deeper customizations, you can access settings directly and apply them to CometChat UI components.

***

## Understanding the Customization Architecture

The iOS UI Kit Builder uses the following for customization:

| Component                  | Purpose                                          | When to Modify                               |
| -------------------------- | ------------------------------------------------ | -------------------------------------------- |
| `CometChatBuilderSettings` | Feature flags and configuration loaded from JSON | Functional changes (enable/disable features) |
| `CometChatTheme`           | Theme colors and styling                         | UI/visual changes (colors)                   |
| `CometChatTypography`      | Font family and text styling                     | Typography changes                           |

<Info>
  `CometChatBuilderSettings` is loaded from your `cometchat-builder-settings.json` file at app launch using `CometChatBuilderSettings.loadFromJSON()`.
</Info>

***

## Applying Theme Settings

Apply your Builder configuration to CometChat theme at app launch:

```swift theme={null}
import CometChatBuilder

func application(_ application: UIApplication,
                 didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Load JSON config
    CometChatBuilderSettings.loadFromJSON()

    // Apply brand color
    CometChatTheme.primaryColor = UIColor.dynamicColor(
        lightModeColor: UIColor(hex: CometChatBuilderSettings.shared.style.color.brandColor),
        darkModeColor: UIColor(hex: CometChatBuilderSettings.shared.style.color.brandColor)
    )
    
    // Apply text colors
    CometChatTheme.textColorPrimary = UIColor.dynamicColor(
        lightModeColor: UIColor(hex: CometChatBuilderSettings.shared.style.color.primaryTextLight),
        darkModeColor: UIColor(hex: CometChatBuilderSettings.shared.style.color.primaryTextDark)
    )
    
    CometChatTheme.textColorSecondary = UIColor.dynamicColor(
        lightModeColor: UIColor(hex: CometChatBuilderSettings.shared.style.color.secondaryTextLight),
        darkModeColor: UIColor(hex: CometChatBuilderSettings.shared.style.color.secondaryTextDark)
    )
    
    // Apply typography
    CometChatTypography.customFontFamilyName = CometChatBuilderSettings.shared.style.typography.font

    return true
}
```

***

## Accessing Feature Flags

You can access feature flags directly from `CometChatBuilderSettings.shared`:

### Chat Features

```swift theme={null}
import CometChatBuilder

// Core Messaging Experience
let typingEnabled = CometChatBuilderSettings.shared.chatFeatures.coreMessagingExperience.typingIndicator
let threadsEnabled = CometChatBuilderSettings.shared.chatFeatures.coreMessagingExperience.threadConversationAndReplies
let photosEnabled = CometChatBuilderSettings.shared.chatFeatures.coreMessagingExperience.photosSharing

// Deeper User Engagement
let mentionsEnabled = CometChatBuilderSettings.shared.chatFeatures.deeperUserEngagement.mentions
let reactionsEnabled = CometChatBuilderSettings.shared.chatFeatures.deeperUserEngagement.reactions
let pollsEnabled = CometChatBuilderSettings.shared.chatFeatures.deeperUserEngagement.polls

// AI User Copilot
let smartReplyEnabled = CometChatBuilderSettings.shared.chatFeatures.aiUserCopilot.smartReply
let conversationStarterEnabled = CometChatBuilderSettings.shared.chatFeatures.aiUserCopilot.conversationStarter

// Group Management
let createGroupEnabled = CometChatBuilderSettings.shared.chatFeatures.groupManagement.createGroup
let deleteGroupEnabled = CometChatBuilderSettings.shared.chatFeatures.groupManagement.deleteGroup

// Moderator Controls
let kickUsersEnabled = CometChatBuilderSettings.shared.chatFeatures.moderatorControls.kickUsers
let banUsersEnabled = CometChatBuilderSettings.shared.chatFeatures.moderatorControls.banUsers
```

### Call Features

```swift theme={null}
// Voice and Video Calling
let voiceCallEnabled = CometChatBuilderSettings.shared.callFeatures.voiceAndVideoCalling.oneOnOneVoiceCalling
let videoCallEnabled = CometChatBuilderSettings.shared.callFeatures.voiceAndVideoCalling.oneOnOneVideoCalling
let groupVideoEnabled = CometChatBuilderSettings.shared.callFeatures.voiceAndVideoCalling.groupVideoConference
let groupVoiceEnabled = CometChatBuilderSettings.shared.callFeatures.voiceAndVideoCalling.groupVoiceConference
```

### Layout Settings

```swift theme={null}
// Layout
let withSidebar = CometChatBuilderSettings.shared.layout.withSideBar
let tabs = CometChatBuilderSettings.shared.layout.tabs
let chatType = CometChatBuilderSettings.shared.layout.chatType
```

### Style Settings

```swift theme={null}
// Style
let theme = CometChatBuilderSettings.shared.style.theme
let brandColor = CometChatBuilderSettings.shared.style.color.brandColor
let font = CometChatBuilderSettings.shared.style.typography.font
let fontSize = CometChatBuilderSettings.shared.style.typography.size
```

***

## Conditional Feature Implementation

Use feature flags to conditionally show/hide UI elements:

```swift theme={null}
import CometChatBuilder

class MessagesViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Conditionally show voice call button
        if CometChatBuilderSettings.shared.callFeatures.voiceAndVideoCalling.oneOnOneVoiceCalling {
            setupVoiceCallButton()
        }
        
        // Conditionally show video call button
        if CometChatBuilderSettings.shared.callFeatures.voiceAndVideoCalling.oneOnOneVideoCalling {
            setupVideoCallButton()
        }
        
        // Conditionally enable reactions
        if CometChatBuilderSettings.shared.chatFeatures.deeperUserEngagement.reactions {
            enableReactions()
        }
    }
}
```

***

## Customizing Colors Programmatically

You can customize colors beyond the JSON configuration:

```swift theme={null}
import CometChatUIKitSwift

// Override primary color
CometChatTheme.primaryColor = UIColor.systemBlue

// Override text colors
CometChatTheme.textColorPrimary = UIColor.dynamicColor(
    lightModeColor: .black,
    darkModeColor: .white
)

CometChatTheme.textColorSecondary = UIColor.dynamicColor(
    lightModeColor: .gray,
    darkModeColor: .lightGray
)

// Override background colors
CometChatTheme.backgroundColor01 = UIColor.dynamicColor(
    lightModeColor: .white,
    darkModeColor: .black
)
```

***

## Customizing Typography

Customize fonts and text styling:

```swift theme={null}
import CometChatUIKitSwift

// Set custom font family
CometChatTypography.customFontFamilyName = "Helvetica"

// Or use system fonts
CometChatTypography.customFontFamilyName = nil // Uses system default
```

***

## Component-Level Customizations

### Message List Configuration

```swift theme={null}
import CometChatUIKitSwift

let messageListConfiguration = MessageListConfiguration()

// Configure based on Builder settings
if CometChatBuilderSettings.shared.chatFeatures.coreMessagingExperience.threadConversationAndReplies {
    messageListConfiguration.showThreadReplies = true
}

if CometChatBuilderSettings.shared.chatFeatures.deeperUserEngagement.reactions {
    messageListConfiguration.showReactions = true
}

let messagesVC = CometChatMessages()
messagesVC.set(messageListConfiguration: messageListConfiguration)
```

### Message Composer Configuration

```swift theme={null}
import CometChatUIKitSwift

let composerConfiguration = MessageComposerConfiguration()

// Configure attachments based on Builder settings
composerConfiguration.hideAttachmentButton = !(
    CometChatBuilderSettings.shared.chatFeatures.coreMessagingExperience.photosSharing ||
    CometChatBuilderSettings.shared.chatFeatures.coreMessagingExperience.videoSharing ||
    CometChatBuilderSettings.shared.chatFeatures.coreMessagingExperience.fileSharing
)

if CometChatBuilderSettings.shared.chatFeatures.deeperUserEngagement.voiceNotes {
    composerConfiguration.hideVoiceRecording = false
}

let messagesVC = CometChatMessages()
messagesVC.set(messageComposerConfiguration: composerConfiguration)
```

***

## Modifying the JSON Configuration

To change feature settings, edit your `cometchat-builder-settings.json` file:

```json theme={null}
{
  "settings": {
    "chatFeatures": {
      "coreMessagingExperience": {
        "typingIndicator": true,
        "photosSharing": false,  // Disable photo sharing
        "videoSharing": false    // Disable video sharing
      },
      "deeperUserEngagement": {
        "reactions": true,
        "polls": false           // Disable polls
      }
    },
    "style": {
      "theme": "dark",           // Force dark mode
      "color": {
        "brandColor": "#FF5733"  // Custom brand color
      }
    }
  }
}
```

<Note>
  Changes to the JSON file require rebuilding the app to take effect.
</Note>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="UI Kit Builder Settings" href="/chat-builder/ios/builder-settings">
    Understand all available feature toggles and configuration options.
  </Card>

  <Card title="Components Overview" href="/ui-kit/ios/overview">
    Explore all available UI components and their customization options.
  </Card>

  <Card title="Theming" href="/ui-kit/ios/theme-introduction">
    Deep dive into colors, typography, and advanced styling.
  </Card>

  <Card title="Directory Structure" href="/chat-builder/ios/builder-dir-structure">
    Understand how the exported code is organized.
  </Card>
</CardGroup>