Styling

Customize the look and feel of WorkOS Widgets.

WorkOS Widgets are powered by Radix Themes, which provides beautiful default styles with zero configuration. The fastest way to style your widgets is to import styles exported from both Radix Themes and WorkOS Widgets.

CSS imports

CSS

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

Once you import both stylesheets you can customize Widgets using the theme prop. This prop is provided to the WorkOsWidgets component rendered at the top of your application. All Widgets will share styles as configured in the theme prop.

Theme customization

JavaScript

 function App({ children }) {
  return (
    <WorkOsWidgets
      theme={{
        appearance: 'dark',
        accentColor: 'green',
        radius: 'medium',
        fontFamily: 'Inter',
      }}
    >
      {children}
    </WorkOsWidgets>
  );
}

See the theme customization guide for more details on theme prop.

Using CSS

If you choose not to use the theming capabilities in Radix Themes, you can style Widgets using CSS. We recommend starting with the layout.css stylesheet from Radix Themes, as well as the base.css stylesheet from WorkOS Widgets. These styles provide a base level of functional styling without opinionated design choices.

Individual elements in Widgets are accessible via CSS class selectors prefixed with woswidgets-. For example, you can add your own button styles by selecting the woswidgets-button class.

CSS customization

CSS

 .woswidgets-button {
  border-radius: 4px;
  color: hsl(0 0% 100%);
  background-color: hsl(272deg 81% 56%);
  background-image: linear-gradient(
    to top right,
    hsl(272deg 81% 56%),
    hsl(271deg 91% 65%)
  );
  /* ... */
}