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

# Hosted Components

Axle provides fully-hosted components that can be embedded in your application through iFrames or mobile web views. These components are served from Axle's infrastructure and communicate with your application through URL parameters and postMessage events.

### Communication

Hosted components communicate with your application through:

* **URL Parameters**: Pass configuration and theming data through query parameters
* **PostMessage Events**: Send and receive form lifecycle events through the `postMessage` API.

### Authentication

To prevent JWT tokens from being logged or cached in URLs, these must be sent through the postMessage API.

**To ensure security, we validate the origin of all messages received in iFrames against the origin specified
in the JWT.** This means you must embed the iFrame within a website hosted on your specified `allowed_origin`.

<Danger>You must specify the **destination origin** in `postMessage` to prevent leaking tokens to untrusted websites</Danger>

```js theme={null}
iframe.contentWindow.postMessage({
  token: jwtToken,
  type: 'axle:token'
}, 'https://app.axle.energy'); // MUST specify this
```

### Theming

Hosted components support comprehensive theming through URL parameters. You can customize the appearance by passing color and styling properties in the URL query string.

#### Color Properties

Pass color values using these URL parameters:

* `background` - Main background color
* `foreground` - Primary text color
* `popover` - Popover background color
* `popoverForeground` - Popover text color
* `primary` - Primary brand color
* `primaryForeground` - Primary button text color
* `secondary` - Secondary background color
* `secondaryForeground` - Secondary text color
* `destructive` - Error/destructive action color
* `border` - Border color
* `ring` - Focus ring color
* `muted` - Muted background color
* `mutedForeground` - Muted text color

#### Dark Mode Support

For dark mode theming, prefix any color property with `dark-`:

* `dark-background` - Dark mode background color
* `dark-foreground` - Dark mode text color
* `dark-primary` - Dark mode primary color
* etc.

#### Additional Properties

* `radius` - Border radius (e.g., `0.5rem`, `8px`)
* `fontFamily` - Font family name

#### Example Usage

```html theme={null}
<iframe src="https://components.axle.energy/form?
  background=%23ffffff&
  foreground=%23000000&
  primary=%23007AFF&
  primaryForeground=%23ffffff&
  radius=0.5rem&
  fontFamily=Inter&
  dark-background=%23000000&
  dark-foreground=%23ffffff&
  externalAssetId=your-asset-id">
</iframe>
```

All color values must be valid CSS colors (hex, rgb, rgba, hsl, hsla, oklch) and size values must include valid CSS units.