Theme Customization

Customize the look and feel of WorkOS Widgets using Radix Themes.

Using the `theme` prop

The theme prop can be used to customize the overall appearance of WorkOS Widgets.

theme support relies on external stylesheets from Radix Themes and WorkOS Widgets. Start by importing both stylesheets into your application.

CSS imports

CSS

 /* Provides styles for Radix Themes components and its theming API */
@import '@radix-ui/themes/styles.css';
/* Provides additional styles specific to WorkOS Widgets */
@import '@workos-inc/widgets/styles.css';

`theme` properties

Prop	Type	Default	Required
`accentColor`	`enum`	`"indigo"`	Not required
`appearance`	`enum`	`"inherit"`	Not required
`fontFamily`	`string`	No default value	Not required
`grayColor`	`enum`	`"auto"`	Not required
`hasBackground`	`boolean`	`true`	Not required
`panelBackground`	`enum`	`"translucent"`	Not required
`radius`	`enum`	`"medium"`	Not required
`scaling`	`enum`	`"100%"`	Not required

See the Radix Themes API reference for more information on theming options.

Using the `elements` prop

Underlying components can be styled using the elements prop. This object is a mapping of component names to their respective Radix Theme component props.

Elements customization

JavaScript

 function App({ children }) {
  return (
    <WorkOsWidgets
      elements={{
        avatar: {
          size: '1',
          radius: 'full',
        },
        primaryButton: {
          color: 'amber',
          highContrast: true,
          variant: 'surface',
        },
        dialog: {
          align: 'center',
          maxHeight: '80svh',
          maxWidth: '80svw',
        },
      }}
    >
      {children}
    </WorkOsWidgets>
  );
}

`elements` properties

Each element is mapped to a Radix Theme component and accepts the same props as its respective component. See the Radix Themes documentation for each component for all available props.

Component	Radix component
`avatar`	`Avatar`
`badge`	`Badge`
`primaryButton`	`Button`
`secondaryButton`	`Button`
`destructiveButton`	`Button`
`dialog`	`Dialog`
`dropdown`	`Dropdown`
`iconButton`	`IconButton`
`label`	`Label`
`primaryMenuItem`	`MenuItem`
`destructiveMenuItem`	`MenuItem`
`select`	`Select`
`skeleton`	`Skeleton`
`textfield`	`TextField`

Theme Customization

Using the theme prop

theme properties

Using the elements prop

elements properties

Using the `theme` prop

`theme` properties

Using the `elements` prop

`elements` properties