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

# Corbado Web UI Components for Passkey Integration

> Overview of Corbado Web UI Components. Our JS-based components simplify passkey ceremonies, fallback logic, and user interactions for any front-end.

<Columns cols={3}>
  <Card href="https://cognito.cloud.corbado-demo.com">
    Try Demo
  </Card>

  <Card href="https://calendly.com/vincent-delitz">
    Talk to Adoption Engineer
  </Card>

  <Card href="https://www.corbado.com/passkeys/enterprise">
    Whitepaper
  </Card>
</Columns>

## 1. Introduction

Enterprise passkey integrations can be complex especially when you have multiple systems, existing authentication flows, and varied compliance requirements. **Corbado Connect** aims to simplify this by providing JavaScript-based UI components that work seamlessly in any front-end environment. These components handle the heavy lifting of passkey ceremonies, fallback logic, and user interactions, letting you focus on building great user experiences.

Corbado's approach is lightweight: you embed our JavaScript library or use npm packages to mount passkey related components in your code. This guide shows a short introduction to the two core components [CorbadoConnectAppend](/corbado-connect/web-ui-components/corbadoconnectappend) and [CorbadoConnectLogin](/corbado-connect/web-ui-components/corbadoconnectlogin) and also briefly introduces [CorbadoConnectPasskeyList](/corbado-connect/web-ui-components/corbadoconnectpasskeylist) for passkey management.

This article [**focuses primarily on the automatic login approach tailored for identifier-first implementations**](https://www.corbado.com/blog/passkey-login-best-practices#61-automatic-passkey-login-approach-with-corbado). If you're interested in learning more about implementing passkeys using our [passkey button approach](https://www.corbado.com/blog/passkey-login-best-practices#62-separate-passkey-button-approach-with-corbado) with [Corbado Web UI Components](/corbado-connect/web-ui-components/overview), feel free to contact us directly for further details.

## 2. Components as one part of the Enterprise Passkey Platform

<img src="https://mintcdn.com/corbado-43/CQvNeVWWPUAy-5gE/images/corbado-connect/corbado-connect-architecture.webp?fit=max&auto=format&n=CQvNeVWWPUAy-5gE&q=85&s=a6eeed8815d5dc237e52664be8b55f01" alt="Corbado Explainer" width="2740" height="2116" data-path="images/corbado-connect/corbado-connect-architecture.webp" />

Frontend Components are only one part of the integration options provided by Corbado. In addition to their primary passkey functionality, all components also collect [Passkey Intelligence](/corbado-connect/features/passkey-intelligence) and Tracking Signals to allow for optimized decision-making and enhance the overall security and user experience.

## 3. Configuration Supported by All Components

Each [Corbado Web UI Component](/corbado-connect/web-ui-components/overview) supports a common set of configuration parameters:

| **Name**               | **Description**                                                                                                                                                                                         | **Required** | **Type**  |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | --------- |
| `projectId`            | The ID of the Corbado project.                                                                                                                                                                          | ✅            | `string`  |
| `frontendApiUrlSuffix` | The Corbado Frontend API to connect to. You can specify whether the component connects to the staging or production environment.                                                                        | ✅            | `string`  |
| `isDebug`              | If set to `true`, the [Corbado Web UI Components](/corbado-connect/web-ui-components/overview) will log debug information to the console. Useful for development, but should be disabled in production. |              | `boolean` |
| `enableHighlight`      | If set to `true`, components are visually surrounded by a red box—helpful in development to understand the scope of each component in your layout.                                                      |              | `boolean` |
| `flags`                | An object that defines default flags to include in requests to Corbado's Frontend API. Currently, only `"conditional-ui-allowed"` is used; more flags may be added in the future as needed.             |              | `object`  |