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

# Getting started

> Install Whop Elements and mount your first element — React or vanilla JavaScript.

Whop Elements are hosted, themeable UI components you embed in your own site. Each element renders in an isolated frame served from Whop's CDN — you install a thin, fully typed package and the element code stays up to date on its own.

## Install

<CodeGroup>
  ```bash React theme={null}
  npm install @whop/elements-react @whop/elements
  ```

  ```bash Vanilla JS theme={null}
  npm install @whop/elements
  ```
</CodeGroup>

## Mount your first element

<CodeGroup>
  ```tsx React theme={null}
  import { WhopElements, Wallet, DepositElement } from "@whop/elements-react";
  import { loadWhop } from "@whop/elements";

  function Example() {
    return (
      <WhopElements elements={loadWhop()}>
        <Wallet /* options */>
          <DepositElement />
        </Wallet>
      </WhopElements>
    );
  }
  ```

  ```html Vanilla JS theme={null}
  <script src="https://js.whop.cloud/elements/amber/elements.js" data-whop-elements></script>
  <script type="module">
    const wallet = window.WhopElements().wallet.create({ /* options */ });
    wallet.create('deposit').mount('#wallet-deposit');
  </script>
  ```
</CodeGroup>

Prefer npm over the script tag? `loadWhop()` injects the same hosted script and resolves the global constructor:

```ts theme={null}
import { loadWhop } from "@whop/elements";

const whop = (await loadWhop())({ locale: "en" });
const wallet = whop.wallet.create({ /* options */ });
```

## Global configuration

Everything you pass at construction applies to every element group created from that instance (a handle's own options can override per group):

<ResponseField name="appearance" type="Appearance">
  Visual customization for every element — `theme` (light/dark + palettes), `variables` (CSS custom properties), and `classes` (per-part style declarations). The color scheme is applied before an element's first paint, so dark pages never flash light. See [Appearance](/sdk/elements/appearance).
</ResponseField>

<ResponseField name="locale" type="&#x22;en&#x22; | &#x22;es&#x22; | &#x22;zh&#x22; | &#x22;nl&#x22; | &#x22;pt&#x22; | &#x22;de&#x22; | &#x22;it&#x22; | &#x22;fr&#x22; | &#x22;ja&#x22; | &#x22;pl&#x22; | &#x22;tr&#x22;">
  Locale for element UI text — one of the app's built locales; any other value falls back to the default locale. Defaults to `"en"`.
</ResponseField>

<ResponseField name="environment" type="&#x22;production&#x22; | &#x22;sandbox&#x22;">
  Which Whop API environment the elements talk to — `"sandbox"` targets the sandbox API (test data; no real money moves). The sandbox environment is not yet generally available. Defaults to `"production"`.
</ResponseField>

```ts theme={null}
const whop = WhopElements({
  locale: 'es',
  appearance: { theme: { appearance: 'dark', accentColor: 'blue' } }
});
```

In React, the same object rides `<WhopElements appearance={…} locale={…}>`.

## Next

* [Appearance](/sdk/elements/appearance) — theming, CSS variables, and per-part restyling
* [Wallet](/sdk/elements/wallet/overview) — Funds a Whop account. Mint it with the account id, mount the deposit element, and the payer gets that account's live funding rails — a crypto deposit address per network and the bank wire fields per settlement currency — resolved with no credentials. Rails you settle yourself (a saved card, a platform balance) are opt-in props whose choices come back as events on the element.