# Style overrides

Override the styles of individual SDK components, including the entry component and user message speech bubbles.

Restyle individual agent components without rebuilding the theme. Pass a `styleOverride` object to `setConfiguration` to control layout, borders, color, and typography on specific components.

<StyleAnatomy />

For global theming, see [Dark Mode](/customize/dark-mode/).

## entryComponentStyle

<AlignmentComparison />

Styles the entry component, including its header layout and the conversation starter borders. This is an object with nested properties for each area of the entry component.

Type: `object`

Default value:

```javascript
{
  "header": {
    "horizontalAlignment": "start"
  },
  "conversationStarter": {
    "borderWidth": 1,
    "borderColor": "#000000"
  }
}
```

### Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `header.horizontalAlignment` | `"start" \| "center" \| "end"` | `"center"` | Horizontal alignment of header content. |
| `conversationStarter.borderWidth` | `number` | `1` | Border width of each conversation starter. |
| `conversationStarter.borderColor` | `string` | `""` | Border color of each conversation starter. |

## speechBubbleStyle

Styles the user message speech bubble. Use it to control spacing, color, and typography inside the bubble.

Type: `object`\
Default value: `{}`

### Properties

| Property | Type | Description |
| --- | --- | --- |
| `padding` | `string` | Internal spacing inside the speech bubble. |
| `borderRadius` | `string` | Corner rounding of the speech bubble. |
| `backgroundColor` | `string` | Background color of the speech bubble. |
| `color` | `string` | Text color inside the speech bubble. |
| `fontSize` | `string` | Font size for bubble text. |
| `lineHeight` | `string` | Line height for text inside the bubble. |

## Example

```javascript
foldspace.agent('YOUR-AGENT-KEY').setConfiguration({
  styleOverride: {
    entryComponentStyle: {
      header: {
        horizontalAlignment: "start"
      },
      conversationStarter: {
        borderColor: "#E6E9EE",
        borderWidth: 1
      }
    },
    speechBubbleStyle: {
      padding: "14px 16px",
      borderRadius: "12px",
      backgroundColor: "#FFFFFF",
      color: "#0B1220",
      fontSize: "14px",
      lineHeight: "1.4"
    }
  }
});
```