---
title: Signup component
description: Render a native signup form from a Lockerverse signup definition.
sidebar:
  order: 4
---

import CodeBlock from "blume/components/content/CodeBlock.astro";
import signupRecipe from "../../recipes/signup.tsx?raw";

<CodeBlock code={signupRecipe} lang="tsx" />

## Properties

```ts
type LockerverseSignupProps = {
  widget: UseLockerverseSignupResult;
  branding?: {
    accentColor?: string;
    imageUrl?: string | null;
    name: string;
  };
  googlePlacesApiKey?: string;
  onSignupComplete?: (submission: {
    id: string;
    submittedAt: string;
  }) => void;
  style?: LockerverseStyle;
  theme?: "dark" | "light";
};
```

Use `useLockerverseSignup(options)` and pass its result as `widget={widget}`.
The hook is the only source for the client, definition, loading state, and load
error. This entry does not import Stripe.

The API, environment, community slug, and signup slug stay fixed for the
mounted hook. To show a different signup, remount the owning component
with a new React `key`. Theme, branding, and callbacks can change without a
remount. `refresh()` reloads the same signup.

Use the same `LockerverseStyle` tokens as payment and donate launcher. See
[Theming](/react/theming) and the [live theme workbench](/examples/theming).


## Host integration and verification

Use the saved `communitySlug`, `signupSlug`, `apiBaseUrl`, and `environment`
from the prompt. Reuse the existing signup section and host theme. Load the
live definition; do not hard-code fields, required flags, choices, or consent
text. The SDK supplies loading, validation, error, and completion states.
Show completion only through `onSignupComplete`. Do not turn this form into a
payment flow, account signup, or a separate backend integration.

Pass `googlePlacesApiKey` only when the host has an appropriate public,
restricted browser key and address suggestions are wanted. Manual address
entry must remain available. Never put private API keys or submitted contact
data in page source, metadata, URLs, analytics, or logs.

On an SSR host, fetch the definition through `createLockerverseSignupClient`
from `@lockerverse/sdk/signup` and its `load()` method. Seed
`useLockerverseSignup(options, { initialSignup })`; keep the available
definition visible during refresh. Use the installed types for the complete
validated snapshot. Read the shared guide for static-site constraints.

Build and check the form on desktop and 390 by 844 mobile. Check keyboard access,
required-field validation, loading and error states, and manual address entry
when configured. Do not send a live signup submission during this check.