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.
Overview
This page documents the shared types used across Whop embedded components.
EmbeddableElement
| Property | Type | Required | Default | Description |
|---|
mount | (element: HTMLElement | '#${string}') => void | Yes | - | - |
unmount | () => void | Yes | - | - |
CSSValue
A CSS property value.
CSSProps
A record of CSS properties and their values.
type CSSProps = { [x: string]: string; }
Classes
A record of CSS class names to their style definitions.
type Classes = { [x: string]: CSSProps; }
Variables
CSS custom properties (variables) that can be used to customize element styles.
Keys must start with -- prefix.
type Variables = { [x: `--${string}`]: string; }
AccentColor
Available accent colors for theming elements.
These colors are used for primary UI elements like buttons, links, and highlights.
type AccentColor = "ruby" | "blue" | "red" | "yellow" | "green" | "gray" | "tomato" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "cyan" | "teal" | "jade" | "grass" | "brown" | "orange" | "indigo" | "sky" | "mint" | "amber" | "lime" | "lemon" | "magenta" | "gold" | "bronze"
Theme
Theme configuration for customizing the visual appearance of elements.
const theme: Theme = {
appearance: "dark",
accentColor: "blue",
grayColor: "slate",
};
| Property | Type | Required | Default | Description |
|---|
appearance | "light" | "dark" | undefined | No | - | The color scheme to use. - ‘“light”’ - Light mode with dark text on light backgrounds - ‘“dark”’ - Dark mode with light text on dark backgrounds |
accentColor | AccentColor | undefined | No | - | The primary accent color used for interactive elements. |
grayColor | "gray" | "mauve" | "slate" | "sage" | "olive" | "sand" | "auto" | undefined | No | - | The gray color palette to use for neutral elements. Use ‘“auto”’ to automatically match the accent color. |
dangerColor | "ruby" | "red" | "tomato" | undefined | No | - | The color used for error states and destructive actions. |
warningColor | "yellow" | "amber" | undefined | No | - | The color used for warning states. |
successColor | "green" | "teal" | "jade" | "grass" | undefined | No | - | The color used for success states. |
infoColor | "blue" | "sky" | undefined | No | - | The color used for informational states. |
Appearance
Configuration for customizing the visual appearance of Whop elements.
Use this to match the embedded components to your application’s design.
const appearance: Appearance = {
theme: {
appearance: "dark",
accentColor: "blue",
},
};
const whopElements = new WhopElements({ appearance });
| Property | Type | Required | Default | Description |
|---|
variables | Variables | null | undefined | No | - | CSS custom properties to override default styles. |
classes | Classes | null | undefined | No | - | Custom CSS classes to apply to elements. |
theme | Theme | null | undefined | No | - | Theme settings for colors and appearance mode. |
WhopElementsEnvironment
The environment to use for API calls.
"production" - Use the live production API"sandbox" - Use the sandbox API for testing
type WhopElementsEnvironment = "production" | "sandbox"
WhopElementsOptions
Configuration options for initializing WhopElements.
const whopElements = new WhopElements({
appearance: {
theme: { appearance: "light" },
},
locale: "en",
environment: "production",
});
| Property | Type | Required | Default | Description |
|---|
appearance | Appearance | undefined | No | - | Customize the appearance of the Whop embedded Elements. Includes theme settings like light/dark mode and accent colors. |
locale | "en" | undefined | No | ”en” | The locale to use for all Elements. Controls the language and formatting of text, dates, and numbers. |
environment | WhopElementsEnvironment | undefined | No | ”production” | The environment to use for API calls. Use ‘“sandbox”’ for testing without affecting production data. |
