Styling

Customize the look and feel of WorkOS Widgets.

WorkOS Widgets are powered by Radix Themes, which provides beautiful default styles with zero configuration. Style your Widgets most quickly with the theme prop.

Pass this prop to the WorkOsWidgets component rendered at the top of your application. All Widgets inherit styles 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

Style Widgets using CSS if you choose not to use the theming capabilities in Radix Themes. Access individual elements via CSS class selectors prefixed with woswidgets-. For example, 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%)
  );
  /* ... */
}

See the CSS customization guide for more details on styling Widgets with CSS.