This page documents
@whop/elements@1.0.0-beta.0 and @whop/elements-react@1.0.0-beta.0.appearance object styles every element. Pass it globally at construction, per group at create() (or as React props), and change it live at any point with update({ appearance }). Mounted elements restyle in place.
Theme
The high-level design tokens. Every field is optional and fully typed. The values below are enumerated from the source types:"light" | "dark"
The color scheme to use. -
"light" - Light mode with dark text on light backgrounds - "dark" - Dark mode with light text on dark backgroundsAccentColor
The primary accent color used for interactive elements. One of
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."gray" | "mauve" | "slate" | "sage" | "olive" | "sand" | "auto"
The gray color palette to use for neutral elements. Use
"auto" to automatically match the accent color."ruby" | "red" | "tomato"
The color used for error states and destructive actions.
"yellow" | "amber"
The color used for warning states.
"green" | "teal" | "jade" | "grass"
The color used for success states.
"sky" | "blue"
The color used for informational states.
Variables
CSS custom properties (variables) that can be used to customize element styles. Keys must start with-- prefix.
Classes
Style declarations for eachwhop-* class name. Each entry restyles one documented part of an element. See the Styling section on each element page for its class list. The framework checks each declaration, then injects the sanitized result inside the element’s frame because page stylesheets cannot reach it.
A style declaration object that maps CSS properties to values, like React’s CSSProperties. Property names can use camel case (fontWeight) or kebab case (font-weight). The framework normalizes each name and checks it against the list of safe properties before applying it.