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

# Branding & Layout

> Customize Web SDK UI appearance with branding guidelines and layout options

<div className="quick-summary-wrapper">
  <div className="quick-summary-header">
    <span className="quick-summary-icon" aria-hidden="true" />

    <span className="quick-summary-title">Quick summary</span>
  </div>

  <div className="quick-summary-content">
    The Suki SDK comes with an out-of-the-box UI component that automatically manages user states, recording flows, and error handling. The default recommended dimensions for optimal display are 360 pixels in width and 912 pixels in height.

    <br />

    <br />

    Widths exceeding 360 pixels are acceptable, and the height can be adjusted to match the enclosing window's dimensions. Optional theme colors and UI options let you align the headed SDK with your application shell.
  </div>

  <div className="quick-summary-footer">
    <span className="quick-summary-footer-icon" aria-hidden="true" />

    <span className="quick-summary-footer-text">Last updated:</span>
    <span className="quick-summary-footer-date">July 2026</span>
  </div>
</div>

Customize the Suki SDK UI appearance with branding guidelines and layout options.

<img src="https://mintcdn.com/suki-1e08f176/8ZbqOHQ5xwHlf7Ms/web-sdk/assets/branding-1.webp?fit=max&auto=format&n=8ZbqOHQ5xwHlf7Ms&q=85&s=eabac52e99360b96bf64559ce29e7f83" alt="branding" width="3300" height="1766" data-path="web-sdk/assets/branding-1.webp" />

## Common integration patterns and use cases

Design the headed Web SDK embed around layout, optional theme colors, and UI chrome toggles so the ambient experience fits your application shell. The headed SDK owns the ambient UI; your application owns mount configuration, submission handling, and EHR writeback.

The following patterns show common ways to brand and size the headed Web SDK for your application:

<CardGroup cols={2}>
  <Card title="Use the Recommended Embed Size" icon="expand">
    Size the SDK container to about **360px** width and **912px** height for the default headed UI experience.
  </Card>

  <Card title="Widen Beyond the Default Width" icon="arrows-left-right">
    Allow widths greater than **360px** when your host layout needs a wider panel. Keep height aligned with the enclosing window.
  </Card>

  <Card title="Match Host Window Height" icon="arrows-up-down">
    Adjust the SDK height to the enclosing window so the full recording and note workflow remains visible without clipping.
  </Card>

  <Card title="Pass Optional Theme Colors on Init" icon="palette">
    Set `theme` on `init` with `ThemeOptions` fields such as `primary`, `background`, `secondaryBackground`, `foreground`, and `warning`. Omit `theme` to keep Suki brand defaults.
  </Card>

  <Card title="Toggle Headed UI Controls" icon="sliders">
    Pass `uiOptions` to `SukiAssistant` to control chrome such as `showCloseButton`, `showCreateEmptyNoteButton`, `showStartAmbientButton`, and `sectionEditing`.
  </Card>
</CardGroup>

## Spacing and layout guidelines

The Suki SDK comes with an out-of-the-box UI component that will automatically manage user states, recording flows and error handling, allowing you to provide your users with a seamless experience.

Below are a set of recommended guidelines on the width and height of the SDK UI when embedding it in your application.

<img src="https://mintcdn.com/suki-1e08f176/8ZbqOHQ5xwHlf7Ms/web-sdk/assets/branding-2.webp?fit=max&auto=format&n=8ZbqOHQ5xwHlf7Ms&q=85&s=ca468b83a08c3057feef449cc5ca3037" alt="spacing" width="3300" height="1766" data-path="web-sdk/assets/branding-2.webp" />

The default recommended dimensions for optimal display are **360 pixels** in width and **912 pixels** in height. However, widths exceeding **360 pixels** are acceptable, and the height can be adjusted to match the enclosing window's dimensions.

## Theme colors

Pass an optional `theme` object when you call `init`. Theme colors default to Suki brand colors when omitted.

Supported `ThemeOptions` fields:

<Accordion title="ThemeOptions Fields" defaultOpen={true}>
  <ResponseField name="primary" type="string" default="rgb(28,28,28)">
    The primary color of the theme in rgb.
  </ResponseField>

  <ResponseField name="background" type="string" default="rgb(255, 255, 255)">
    The primary background color of the theme in rgb.
  </ResponseField>

  <ResponseField name="secondaryBackground" type="string" default="rgb(233, 233, 240)">
    The secondary background color of the theme in rgb.
  </ResponseField>

  <ResponseField name="foreground" type="string" default="rgb(0, 0, 0)">
    The foreground and text color of the theme in rgb.
  </ResponseField>

  <ResponseField name="warning" type="string" default="rgb(255, 184, 0)">
    The warning color used for alerts and notifications in rgb.
  </ResponseField>
</Accordion>

Refer to [ThemeOptions](/web-sdk/api-reference/types/theme-options) for types and defaults, and [Theming and customization](/web-sdk/examples/theming-and-customization) for a full React example.

```jsx React theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
init({
  authManager,
  theme: {
    primary: "rgb(28, 28, 28)",
    background: "rgb(255, 255, 255)",
    secondaryBackground: "rgb(233, 233, 240)",
    foreground: "rgb(0, 0, 0)",
    warning: "rgb(255, 184, 0)",
  },
});
```

## UI options

Pass `uiOptions` to `SukiAssistant` to show or hide headed UI controls. Refer to [UIOptions](/web-sdk/api-reference/types/ui-options) for the full property list.

```jsx React theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
<SukiAssistant
  encounter={encounter}
  onNoteSubmit={handleNoteSubmit}
  uiOptions={{
    showCloseButton: false,
    showCreateEmptyNoteButton: false,
    showStartAmbientButton: true,
    sectionEditing: {
      enableDictation: false,
      enableCopy: true,
    },
  }}
/>
```