Skip to main content
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.
Configure your login methods in the MoonKey Dashboard before using the UI components.
See live demos of all UI components and customization options at demo.moonkey.fun.

​
Available UI Components

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

​
Authentication Components

Login Modal

The main authentication screen with support for email, OAuth, and wallet login methods.

Email OTP

Email verification code entry screen for passwordless authentication.

​
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: 
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: 
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.

​
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: 
<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:

Login Modal

Authentication with email, OAuth, and wallet

Email OTP

Email verification code entry