Customize the look and feel of WorkOS Widgets using CSS.
Widgets can be styled using plain CSS using namespaced class and data-attribute selectors.
While optional, 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.
/* Provides basic layout styles for Radix Themes components */ @import '@radix-ui/themes/layout.css'; /* Provides additional basic styles specific to WorkOS Widgets */ @import '@workos-inc/widgets/base.css';
Elements in Widgets are accessible via CSS class selectors prefixed with woswidgets-.
| Selector | Description |
|---|---|
.woswidgets-root | The root element for the Widgets provider |
.woswidgets-widget | A selector used on the root element for all Widgets |
| Selector | Description |
|---|---|
.woswidgets-button | Targets all button elements |
.woswidgets-button--primary | Targets primary buttons |
.woswidgets-button--secondary | Targets secondary buttons |
.woswidgets-button--destructive | Targets destructive buttons |
| Selector | Description |
|---|---|
.woswidgets-dialog | Targets all dialog elements |
.woswidgets-dialog-overlay | Targets the overlay for a dialog element |
| Selector | Description |
|---|---|
.woswidgets-button | Targets all button elements |
.woswidgets-icon-button | Targets all icon button elements |
| Selector | Description |
|---|---|
.woswidgets-menu-item | Targets all menu item elements |
.woswidgets-menu-item--destructive | Targets destructive menu items |
| Selector | Description |
|---|---|
.woswidgets-select | Targets all select elements |
.woswidgets-select-dropdown | Targets dropdown elements belonging to a select |
.woswidgets-select-item | Targets menu item elements belonging to a select |