Appearance

Theme Cimplify Elements to match your brand.

const elements = client.elements('bus_xxxxx', {
  appearance: {
    theme: 'dark',
    variables: {
      primaryColor: '#22d3ee',
      fontFamily: 'Inter, system-ui, sans-serif',
      borderRadius: '12px',
    },
  },
})

Appearance Object

type ElementAppearance = {
  theme?: 'light' | 'dark'
  variables?: {
    primaryColor?: string    // CSS color
    fontFamily?: string      // CSS font-family
    borderRadius?: string    // CSS border-radius
  }
}

Options

Variable	Default	Notes
`theme`	`"light"`	`"light"` or `"dark"`
`primaryColor`	`#2563eb`	Validated as CSS color. Invalid values fall back to default.
`fontFamily`	`Inter / system stack`	Sanitized for injection-safe values.
`borderRadius`	`0.75rem`	Validated as CSS border-radius.

React Usage

TSX

import { ElementsProvider } from '@cimplify/sdk/react'

const appearance = {
  theme: 'light' as const,
  variables: {
    primaryColor: '#111827',
    fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif',
    borderRadius: '10px',
  },
}

<ElementsProvider
  client={client}
  businessId="bus_xxxxx"
  options={{ appearance }}
>
  <Checkout />
</ElementsProvider>

Vanilla JS Usage

const elements = client.elements('bus_xxxxx', {
  appearance: {
    theme: 'light',
    variables: { primaryColor: '#111827', borderRadius: '10px' },
  },
})

const auth = elements.create('auth')
auth.mount('#auth-container')

Appearance is captured at mount time. Changing it after mount has no effect -- this is intentional to prevent iframe remount. In React, memoize the appearance object to avoid warnings.