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

# Overview

Easy user onboarding with MoonKey's customizable UI components.

MoonKey provides pre-built user interface components that handle authentication interactions. These components are designed to integrate seamlessly into your application while remaining highly customizable to match your brand.

<Info>
  [Configure your login methods](/get-started/dashboard/login-methods) in the MoonKey Dashboard before using the UI components.
</Info>

<Tip>
  See live demos of all UI components and customization options at [demo.moonkey.fun](https://demo.moonkey.fun).
</Tip>

## Available UI Components

MoonKey provides UI components for the complete authentication and wallet interaction flow:

### Authentication Components

<Card title="Login Modal" icon="arrow-right-to-bracket" href="/authentication/user-authentication/ui-components/login">
  The main authentication screen with support for email, OAuth, and wallet login methods.
</Card>

<Card title="Email OTP" icon="envelope-open-text" href="/authentication/user-authentication/ui-components/email-otp">
  Email verification code entry screen for passwordless authentication.
</Card>

## Key Features

### Pre-built & Ready to Use

All UI components come ready to use out of the box. Simply call the appropriate method from the MoonKey SDK, and the UI will handle the rest:

```tsx theme={null}
import { useMoonKey } from '@moon-key/react-auth';

function MyComponent() {
  const { start } = useMoonKey();
  
  // Opens the login modal
  return <button onClick={() => start()}>Sign in</button>;
}
```

### Highly Customizable

Every UI component can be customized to match your brand:

* **Logo** - Display your company logo
* **Header Title** - Custom title for each screen
* **Header Description** - Custom description text
* **Close Button** - Show or hide the close button

## Customization

Configure the appearance of all UI components in your `MoonKeyProvider`:

```tsx theme={null}
import { MoonKeyProvider } from '@moon-key/react-auth';

export default function App() {
  return (
    <MoonKeyProvider
      publishableKey="your_publishable_key"
      config={{
        loginMethods: ['email', 'google', 'apple', 'wallet'],
        appearance: {
          logo: 'https://your-app.com/logo.png',
          loginHeaderTitle: 'Welcome to MyApp',
          loginHeaderDescription: 'Sign in to continue',
          hideClose: false
        }
      }}
    >
      {/* Your app */}
    </MoonKeyProvider>
  );
}
```

These appearance settings apply to all UI components throughout the authentication and wallet interaction flows.

Learn more about [configuring appearance](/get-started/frontend-sdks/react/advance/configure-appearance).

## Common Use Cases

### Seamless Onboarding

Create a smooth onboarding experience by combining multiple UI components:

1. User clicks "Sign in" → **Login Modal** appears
2. User enters email → **Email OTP** screen for verification
3. User verifies email → Automatically creates embedded wallet
4. Ready to interact with blockchain!

### Custom Branding

Maintain consistent branding across all screens:

```tsx theme={null}
<MoonKeyProvider
  publishableKey="your_publishable_key"
  config={{
    appearance: {
      logo: 'https://myapp.com/logo.png',
      loginHeaderTitle: 'MyApp',
      // These settings apply to all UI components
    }
  }}
>
  {children}
</MoonKeyProvider>
```

## Component Details

Explore detailed documentation for each UI component:

<CardGroup cols={2}>
  <Card title="Login Modal" icon="arrow-right-to-bracket" href="/authentication/user-authentication/ui-components/login">
    Authentication with email, OAuth, and wallet
  </Card>

  <Card title="Email OTP" icon="envelope-open-text" href="/authentication/user-authentication/ui-components/email-otp">
    Email verification code entry
  </Card>
</CardGroup>