Widget Customization

Every UPTIQ Business Health widget can be restyled to match your platform's look and feel — fonts, colors, spacing, shadows, borders, and per-component detail — without touching the widget's markup or logic. Customization works through standard CSS custom properties (CSS variables), which you override on your page, typically under :root:

:root {
  --us-font-family: 'Roboto';
  --us-widget-container-radius: 10px;
  --us-widget-container-boxshadow: 0px 4px 9px 0px rgb(0 0 0 / 12%);
}

This section has two parts:

• Fundamentals — the shared design tokens every widget draws from: colors, typography, spacing, sizing, shadows, and border radius. Start here for anything that applies broadly across widgets.
• Components — per-component detail: the specific CSS variables available for each UI element (buttons, inputs, alerts, and so on), including their different states (hover, focused, disabled, and more).

If you're setting up dark theme support, pair this with the isDarkTheme property described in Widget Properties.