> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.com/llms.txt
> Use this file to discover all available pages before exploring further.

> Learn how to integrate a custom component library with ACUL

# Integrate a Custom Component Library

<Card title="Before you start">
  You need:

  * An Auth0 development tenant configured with [Universal Login](/docs/authenticate/login/auth0-universal-login) and a [custom domain](/docs/customize/custom-domains).
  * An Auth0 [First Party Application](/docs/get-started/auth0-overview/create-applications#create-applications).
  * Enable [Identifier First Authentication](/docs/authenticate/login/auth0-universal-login/identifier-first) in your Auth0 tenant.
  * [Node.js](http://Node.js) V22+
  * The [Auth0 CLI Tool](https://github.com/auth0/auth0-cli) [authenticated to your existing tenant](https://github.com/auth0/auth0-cli?tab=readme-ov-file#authenticating-to-your-tenant).
  * To review the [ACUL Quickstart guide](/docs/customize/login-pages/advanced-customizations/quickstart)
</Card>

With ACUL, you can use your choice of component libraries to customize your Universal Login prompt screens. The following examples uses [Shadcn](https://ui.shadcn.com/docs), a library of reusable components and the Auth0 `login-passwordless-email-code` screen. In this example, replace the default OTP input with Shadcn’s [InputOTP](https://ui.shadcn.com/docs/components/input-otp) component.

1. Use the Auth0 CLI tool to create an ACUL project.

```bash theme={null}
auth0 acul init <Your-App-Name>
```

Select the `login-passwordless-email-code` screen

2. Run the ACUL local development server to edit and view your screen updates.

```bash theme={null}
auth0 acul dev
```

3. Initialize Shadcn in the root of your project:

```bash theme={null}
npx shadcn-ui@latest init
```

4. Follow the CLI prompts to create the `components.json` file to hold the configuration for your project and a `src/lib/utils.ts` file.

5. Add the component files to `src/components/ui/input-otp.tsx`:

```bash theme={null}
npx shadcn-ui@latest add input-otp
```

6. Integrate the component:
   a. Navigate to `src/screens/login-passwordless-email-code/components/IdentifierForm.tsx` and open the file.
   b. Import the InputOTP components and replace the existing input field. You also need to manage the state of the OTP code and use the correct SDK hook.

```bash theme={null}
// In IdentifierForm.tsx
import { useState } from 'react';
import { useEmailOtpChallenge } from '@auth0/auth0-acul-react'; 
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from '@/components/ui/input-otp'; // Import from ShadCN

// ... inside your component
const { submit } = useEmailOtpChallenge(); 
const [otp, setOtp] = useState('');

const handleSubmit = (e) => {
  e.preventDefault();
  submit({ code: otp }); // Call the submit method with the code
};

return (
  <form onSubmit={handleSubmit}>
    {/* ... other UI elements ... */}
    <InputOTP maxLength={6} value={otp} onChange={setOtp}>
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSlot index={2} />
        <InputOTPSlot index={3} />
        <InputOTPSlot index={4} />
        <InputOTPSlot index={5} />
      </InputOTPGroup>
    </InputOTP>
    <Button type="submit">Verify Code</Button>
  </form>
);
```

7. Run the screen locally with the ACUL Context Inspector to see your new component:

```bash theme={null}
auth0 acul dev -s  login-passwordless-email-code
```

8. Connect your local dev environment to your test tenant to try the new screen in a live authentication flow:

```bash theme={null}
auth0 acul dev --connected --screen login-passwordless-email-code
```

9. Follow the prompts to build your local assets, start the local dev server, and update the ACUL configuration on your tenant.

10. Test the passwordless authentication flow:

```bash theme={null}
auth0 test login
```