Share a component theme
Use one appearance configuration across checkout and supported reporting components.
Choose a starting theme
The Appearance API accepts light or dark themes and modifiers for spacing, text size and radius. Apply a shared object through a supported component’s appearance prop.
Define the configuration
This JavaScript value uses documented top-level modifiers. Pass it to the component you have already installed. export const appearance = { theme: 'light', layoutSpacing: 'default', textSize: 'default', radiusSize: 'smaller' };
Keep the experience consistent
Apply the same configuration to compatible components. Custom themes can adjust layout, typography and color scales; validate custom properties against the installed package’s types.
Review every state
Check keyboard focus, validation errors, disabled controls, long messages and mobile widths. A theme change must preserve readable amounts and payment status. The documentation portal’s theme selector does not automatically change your application’s checkout.