Styling & Themes

Components accept an appearance prop — a JSON configuration object that controls colors, fonts, spacing, and other visual properties. The same tokens work identically in both React and Vue.

Prebuilt themes

Three prebuilt themes are included:

React
Vue

// Default - pill-shaped inputs, bold borders
<AddressEntry appearance={{ theme: 'default' }} />

// Minimal - square corners, subtle borders, compact
<AddressEntry appearance={{ theme: 'minimal' }} />

// Rounded - large radii, soft shadows, spacious
<AddressEntry appearance={{ theme: 'rounded' }} />

<!-- Default - pill-shaped inputs, bold borders -->
<AddressEntry :appearance="{ theme: 'default' }" />

<!-- Minimal - square corners, subtle borders, compact -->
<AddressEntry :appearance="{ theme: 'minimal' }" />

<!-- Rounded - large radii, soft shadows, spacious -->
<AddressEntry :appearance="{ theme: 'rounded' }" />

Overriding design tokens

Use variables to override individual tokens on top of a theme:

React
Vue

<AddressEntry
  appearance={{
    theme: 'minimal',
    variables: {
      colorPrimary: '#003366',
      colorPrimaryHover: '#002244',
      fontFamily: '"Inter", sans-serif',
      borderRadius: '12px',
    },
  }}
/>

<AddressEntry
  :appearance="{
    theme: 'minimal',
    variables: {
      colorPrimary: '#003366',
      colorPrimaryHover: '#002244',
      fontFamily: '\"Inter\", sans-serif',
      borderRadius: '12px',
    },
  }"
/>

Available tokens

Colors

Token	Description
`colorPrimary`	Button background, focus ring, active states
`colorPrimaryHover`	Button hover background
`colorPrimaryText`	Text on primary background
`colorBackground`	Component background
`colorText`	Primary text color
`colorTextSecondary`	Placeholders, hints
`colorBorder`	Input border
`colorBorderFocus`	Input border on focus
`colorError`	Error text and borders
`colorFocusRing`	Focus ring shadow (rgba recommended)
`colorErrorFocusRing`	Error focus ring
`colorSuggestionHover`	Dropdown hover background
`colorDivider`	Divider between suggestions
`colorTextTertiary`	Attribution text and logo color

Typography

Token	Description
`fontFamily`	Font stack for all text
`fontSize`	Base font size
`fontSizeSmall`	Labels, hints, errors
`fontWeightNormal`	Body text and option labels
`fontWeightMedium`	Button and label weight
`fontSizeAttribution`	”Powered by Opendoor” text size

Spacing

Token	Description
`spacing`	Standard padding
`spacingTight`	Compact spacing (icon gaps)
`spacingWide`	Section margins, form field margins

Shape

Token	Description
`borderRadius`	Pill-shaped elements (input, buttons)
`borderRadiusInner`	Dropdown, form inputs
`borderWidth`	Input border width

Shadows

Token	Description
`shadowFocus`	Focus ring box-shadow
`shadowDropdown`	Suggestion dropdown shadow

Sizing

Token	Description
`inputMinHeight`	Input wrapper minimum height
`buttonHeight`	Submit button height
`buttonPaddingX`	Button horizontal padding

Card Selection

These tokens control selectable card components (radio cards, checkbox cards, image cards) used in DtcOnboardingFlow:

Token	Default	Description
`colorCardBackground`	`#ffffff`	Background for selectable cards
`colorCardBorder`	`#e5e7eb`	Border color for unselected cards
`colorCardBorderSelected`	`#235ca3`	Border color when a card is selected
`colorCardBackgroundSelected`	`#f0f5ff`	Background when a card is selected

Need more control?

If the tokens don’t cover what you need, you can build your own components using client-js-core directly. See the Custom UI guide.