Styling

WorkOS Widgets are powered by Radix Themes, which are styled out-of-the-box when you import its CSS in your app. You’ll also need to import an additional CSS file from the WorkOS Widgets package to get everything looking just right.

import '@radix-ui/themes/styles.css';
import '@workos-inc/widgets/styles.css';

You can customize Widgets by passing a theme prop to WorkOSWidgets. This prop accepts an object with the same options as Radix themes.

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

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.

import '@radix-ui/themes/layout.css';
import '@workos-inc/widgets/base.css';

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

.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%)
  );
  /* ... */
}