Customize the look and feel of WorkOS Widgets using Radix Themes.
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.
/* 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';
| 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.
Underlying components can be styled using the elements prop. This object is a mapping of component names to their respective Radix Theme component props.
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> ); }
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.