> ## Documentation Index
> Fetch the complete documentation index at: https://auth0-docs-event-stream-action-templates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Universal Components for Web Applications

> Learn how to install and configure Auth0 Universal Components for web applications.

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "Early Access"
  };
  const stageText = stageTextMap[stage] || "a product release stage";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>This feature is available for {linkify(`${plans} plans`, "https://auth0.com/pricing")}. </>}
            {contact && "To participate, contact " + contact + ". "}
            {terms && <>By using this feature, you agree to the applicable Free Trial terms in Okta's {linkify("Master Subscription Agreement", "https://www.okta.com/legal")}.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>The {feature} feature is in {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

The Auth0 [Universal Components for Web](https://github.com/auth0/auth0-ui-components) library provides pre-built, embeddable UI for Auth0 identity flows using [React](https://react.dev/) and [Next.js](https://nextjs.org/).

Universal Components for Web are built on top of the [Auth0 SDKs](/docs/libraries) and integrate with the [My Organization API](/docs/api/myorganization) to power embedded delegated administration, such as managing Organizations, domains, and SSO providers.

## Prerequisites

To use Auth0 Universal Components for Web:

* You must [have an Auth0 account](https://auth0.com) and configure an Auth0 tenant with the My Organization API enabled.
* [Register your Auth0 application](/docs/get-started/auth0-overview/create-applications). If you do not have an Auth0 application, you can get started with the Auth0 React or Next.js [Quickstarts](https://auth0.com/docs/quickstart/spa/react).
* For client-side authentication, install **React v.16.11+**.
* For server-side authentication, install **Next.js v.13+**.

<Tabs>
  <Tab title="React">
    ## Install Universal Components

    <CodeGroup>
      ```bash npm  wrap lines theme={null}
      npm install @auth0/universal-components-react react-hook-form @auth0/auth0-react
      ```

      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react react-hook-form @auth0/auth0-react
      ```

      <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
        Installs the package alongside `react-hook-form` (a peer dependency) and `@auth0/auth0-react` (required for client-side SPA authentication). The Next.js tab uses proxy mode and does not need `@auth0/auth0-react`.
      </Callout>
    </CodeGroup>

    ## Configure your application

    1. Wrap your application with `Auth0Provider` and `Auth0ComponentProvider`:

    ```tsx App.tsx wrap lines theme={null}
    import { Auth0Provider } from "@auth0/auth0-react";
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
    import "@auth0/universal-components-react/styles";

    const domain = import.meta.env.VITE_AUTH0_DOMAIN;

    function App() {
      return (
        <Auth0Provider
          domain={domain}
          clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
          authorizationParams={{
            redirect_uri: window.location.origin,
          }}
          interactiveErrorHandler='popup' // Required to handle step-up auth challenges via Universal Login popup
        >
          <Auth0ComponentProvider domain={domain}>
            {/* Your app components */}
          </Auth0ComponentProvider>
        </Auth0Provider>
      );
    }
    ```

    2. Import Universal Components:

    ```tsx OrganizationManagementPage.tsx wrap lines theme={null}
    import { useAuth0 } from "@auth0/auth0-react";
    import { OrganizationDetailsEdit } from "@auth0/universal-components-react/spa";

    function OrganizationManagementPage() {
      const { isAuthenticated, isLoading } = useAuth0();

      if (isLoading) return <div>Loading...</div>;
      if (!isAuthenticated) return <div>Please log in</div>;

      return (
        <div>
          <OrganizationDetailsEdit />
        </div>
      );
    }
    ```

    ## Configure Universal Components

    The `Auth0ComponentProvider` manages authentication, caching, internationalization, and toast notifications for all components.

    ```tsx App.tsx wrap lines theme={null}
    <Auth0ComponentProvider
      domain="your-tenant.auth0.com"
      i18n={{ currentLanguage: "en" }}
      themeSettings={{ mode: "light", theme: "default" }}
    >
      {/* Your app components */}
    </Auth0ComponentProvider>
    ```

    ## Style components

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      The stylesheet you imported (`@auth0/universal-components-react/styles`)
      enables all component styles. If you're using Tailwind v4, add `@import
              "@auth0/universal-components-react/tailwind"` to your CSS file.
    </Callout>

    Use CSS variables to customize your branding:

    ```css wrap lines theme={null}
    :root {
      --primary: #4f46e5; /* your brand color */
      --primary-foreground: #ffffff; /* text on buttons */
    }
    ```

    To learn more, read [Style Universal Components](/docs/get-started/universal-components/web/universal-components-style).
  </Tab>

  <Tab title="Next.js">
    ## Install Universal Components

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      You do not need `@auth0/auth0-react`. The Next.js implementation uses proxy
      mode with server-side authentication.
    </Callout>

    <CodeGroup>
      ```bash npm  wrap lines theme={null}
      npm install @auth0/universal-components-react react-hook-form
      ```

      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react react-hook-form
      ```
    </CodeGroup>

    ## Configure your application

    1. Wrap your application with `Auth0Provider` and `Auth0ComponentProvider`:

       In your root layout, add the `Auth0ComponentProvider` in proxy mode. `Auth0Provider` is configured separately in your Next.js setup (typically in `layout.tsx` via [`@auth0/nextjs-auth0`](https://github.com/auth0/nextjs-auth0)).

    ```tsx layout.tsx wrap lines theme={null}
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";
    import "@auth0/universal-components-react/styles";

    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <body>
            <Auth0ComponentProvider
              mode="proxy"
              domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN}
              proxyConfig={{ baseUrl: "/api/auth" }}
            >
              {children}
            </Auth0ComponentProvider>
          </body>
        </html>
      );
    }
    ```

    2. Import Universal Components:

    ```tsx page.tsx wrap lines theme={null}
    import { OrganizationDetailsEdit } from "@auth0/universal-components-react/rwa";

    export default function OrganizationManagementPage() {
      return (
        <div>
          <OrganizationDetailsEdit />
        </div>
      );
    }
    ```

    ## Configure Universal Components

    The `Auth0ComponentProvider` manages authentication, caching, internationalization, and toast notifications for all components. In Next.js, use proxy mode for server-side authentication.

    ```tsx layout.tsx wrap lines theme={null}
    <Auth0ComponentProvider
      mode="proxy"
      domain="your-tenant.auth0.com"
      proxyConfig={{ baseUrl: "/api/auth" }}
      i18n={{ currentLanguage: "en" }}
      themeSettings={{ mode: "light", theme: "default" }}
    >
      {/* Your app components */}
    </Auth0ComponentProvider>
    ```

    ## Style components

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      The stylesheet you imported (`@auth0/universal-components-react/styles`)
      enables all component styles. If you're using Tailwind v4, add `@import
              "@auth0/universal-components-react/tailwind"` to your CSS file.
    </Callout>

    Use CSS variables to customize your branding:

    ```css wrap lines theme={null}
    :root {
      --primary: #4f46e5; /* your brand color */
      --primary-foreground: #ffffff; /* text on buttons */
    }
    ```

    To learn more, read [Style Universal Components](/docs/get-started/universal-components/web/universal-components-style).
  </Tab>

  <Tab title="shadcn">
    ## Install Universal Components

    Universal Components use `@/...` imports. Start by configuring the path alias and project dependencies:

    ```bash wrap lines theme={null}
    npx shadcn@latest init
    ```

    Next, install Universal Components individually via the Shadcn CLI. For example:

    ```bash wrap lines theme={null}
    npx shadcn@latest add @auth0/organization-details-edit
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Shadcn CLI installs the component source code and the
      `@auth0/universal-components-core` dependency for shared utilities and Auth0
      integration.
    </Callout>

    ## Configure your application

    1. Wrap your application with `Auth0Provider` and `Auth0ComponentProvider`:

    ```tsx App.tsx wrap lines theme={null}
    import { Auth0Provider } from "@auth0/auth0-react";
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";

    const domain = import.meta.env.VITE_AUTH0_DOMAIN;

    function App() {
      return (
        <Auth0Provider
          domain={domain}
          clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
          authorizationParams={{
            redirect_uri: window.location.origin,
          }}
          interactiveErrorHandler='popup' // Required to handle step-up auth challenges via Universal Login popup
        >
          <Auth0ComponentProvider domain={domain}>
            {/* Your app components */}
          </Auth0ComponentProvider>
        </Auth0Provider>
      );
    }
    ```

    2. Import Universal Components:

    ```tsx OrganizationManagementPage.tsx wrap lines theme={null}
    import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";

    function OrganizationManagementPage() {
      return (
        <div>
          <OrganizationDetailsEdit />
        </div>
      );
    }
    ```

    ## Configure Universal Components

    The `Auth0ComponentProvider` manages authentication, caching, internationalization, and toast notifications for all components.

    ```tsx App.tsx wrap lines theme={null}
    <Auth0ComponentProvider
      domain="your-tenant.auth0.com"
      i18n={{ currentLanguage: "en" }}
      themeSettings={{ mode: "light", theme: "default" }}
    >
      {/* Your app components */}
    </Auth0ComponentProvider>
    ```

    ## Style components

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Styles for Shadcn are already included in your Tailwind build. No additional
      style imports are needed.
    </Callout>

    Use CSS variables to customize your branding:

    ```css wrap lines theme={null}
    :root {
      --primary: #4f46e5; /* your brand color */
      --primary-foreground: #ffffff; /* text on buttons */
    }
    ```

    To learn more, read [Style Universal Components](/docs/get-started/universal-components/web/universal-components-style).
  </Tab>
</Tabs>

## Example implementations

See complete working examples in the sample applications.

<Card title="Code Examples" icon="github" href="https://github.com/auth0/auth0-ui-components/tree/main/examples">
  React SPA (npm), React SPA (shadcn), and Next.js sample applications with full
  implementation patterns
</Card>

<CardGroup cols={2}>
  <Card title="SaaStart Live Demo" icon="play" href="https://universal-components-saastart.vercel.app/">
    See My Organization Components in action in the live reference B2B SaaS app
  </Card>

  <Card title="SaaS Starter Repository" icon="github" href="https://github.com/auth0-ui-components/saas-starter-uicomponents">
    A secure and high-performance starting point for building modern B2B SaaS web applications.
  </Card>
</CardGroup>

## Next steps

<CardGroup cols={2}>
  <Card title="Configure Auth0ComponentProvider" icon="gear" href="/docs/get-started/universal-components/web/auth0-component-provider">
    Synchronize authentication, internationalization, theming, toast notifications, and caching across all components.
  </Card>

  <Card title="Customize style and themes" icon="palette" href="/docs/get-started/universal-components/web/universal-components-style">
    Customize the design system using Tailwind CSS, CSS variables, and built-in theme presets.
  </Card>

  <Card title="Build a Delegated Admin Interface" icon="users-gear" href="/docs/get-started/universal-components/web/components/build-delegated-admin">
    Use the My Organization API to let your customers manage their own Organizations, domains, and SSO providers.
  </Card>
</CardGroup>