Basic example
scaleMultiplier prop
If no predefined dimensions fit your use case, you can use the scaleMultiplier prop to scale the illustration.
Use scaleMultiplier sparingly and with caution. We have predefined dimensions to ensure that illustrations scale elegantly.
Scaling with dimension
If dimension and scaleMultiplier are both provided the component will scale based on the provided dimension.
Theming
Use the applyTheme prop to enable dynamic theming. When set, the illustration is inlined into the page and colored by the active ThemeProvider's illustration palette instead of loading a static image from the CDN.
This allows the illustration to update automatically when the active color scheme changes, and to reflect a custom brand palette when a non-default theme is provided.
To apply a custom brand palette, set lightIllustrationColor and darkIllustrationColor on your theme and wrap the illustration in a ThemeProvider:
When applyTheme is not set (the default), the illustration loads as a standard <img> from the CDN with hardcoded colors — no performance overhead.