A step-by-step guide for setting up WorkOS Widgets in your application.
First, install the @workos-inc/widgets
package from the npm registry, along with its peer dependencies:
npm install @workos-inc/widgets @radix-ui/themes @tanstack/react-query
WorkOS Widgets uses Radix Themes for its UI components and style customization APIs, while TanStack Query is used for data fetching and caching. Since both libraries are often used in applications, we require them as peer dependencies to avoid duplication, version conflicts, and bloated bundles.
Widgets can be used in any client- or server-rendered React application. See our Widgets examples on GitHub to see how they can be integrated in various frameworks.
Because WorkOS widgets issue client-side requests to WorkOS, it is necessary to configure your site as an allowed web origin. Adding this in the Authentication section of the dashboard will prevent CORS issues when using the widget.