/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const {useMDXComponents: _provideComponents} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    div: "div",
    h2: "h2",
    p: "p"
  }, _provideComponents(), props.components), {PermanentLink, QuickNav} = _components;
  if (!PermanentLink) _missingMdxReference("PermanentLink", true);
  if (!QuickNav) _missingMdxReference("QuickNav", false);
  if (!QuickNav.Heading) _missingMdxReference("QuickNav.Heading", true);
  if (!QuickNav.Item) _missingMdxReference("QuickNav.Item", true);
  if (!QuickNav.Link) _missingMdxReference("QuickNav.Link", true);
  if (!QuickNav.List) _missingMdxReference("QuickNav.List", true);
  if (!QuickNav.Root) _missingMdxReference("QuickNav.Root", true);
  return _jsxs(_Fragment, {
    children: [_jsxs(QuickNav.Root, {
      children: [_jsx(QuickNav.Heading, {}), _jsx(QuickNav.List, {
        children: _jsx(QuickNav.Item, {
          children: _jsx(QuickNav.Link, {
            href: "/widgets/introduction",
            children: "Introduction"
          })
        })
      })]
    }), _jsxs(_components.div, {
      tabIndex: "-1",
      "data-section-slug": "/widgets/introduction",
      children: [_jsx(PermanentLink, {
        label: "Section titled Introduction",
        hidden: true,
        href: "/widgets/introduction",
        children: _jsx(_components.h2, {
          id: "/widgets/introduction",
          children: "Introduction"
        })
      }), "\n", _jsx(_components.p, {
        children: "WorkOS Widgets are React components that provide complete functionality for common enterprise app workflows, for example a Users Management Widget that provides a UI for inviting, removing and editing users."
      }), "\n", _jsx(_components.p, {
        children: "This guide will cover how to add a widget to your app, configure CORS, and supply an authorization token for the widget."
      })]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


Quick Start

Authorization Tokens

Styling

Getting Started

User Management

User Profile

User Sessions

User Security

AuthKit

Domain Verification

SSO Connection

Admin Portal

Organization Switcher

Organizations

Widgets

A step-by-step guide for setting up WorkOS Widgets in your application.

Learn how to integrate WorkOS Widgets in your app.

WorkOS Widgets