Styling
Restyle Sunboard's checklist, tours, and hotspots to match your product by overriding CSS variables.
Sunboard ships a complete default theme in @sunboard/react/styles.css, so the
checklist, tours, and hotspots look polished the moment you install. You restyle
them by overriding CSS custom properties — there's no config file and no
component theming API to learn.
You don't need to do anything
The defaults are production-ready. Override variables only where you want
Sunboard to match your brand. sunboard init appends a starter block of these
variables to your global stylesheet when it can find one — if it didn't (every
project structures CSS differently), just add the overrides yourself as shown
below.
How it works
Every Sunboard surface reads its colors, font, and radius from --sunboard-*
variables defined on :root. To customize, declare the variables you want to
change in a stylesheet that loads after @sunboard/react/styles.css, so your
values win the cascade. sunboard init imports the Sunboard stylesheet first for
exactly this reason — your global CSS comes after it.
:root {
/* Shared across all Sunboard UI */
--sunboard-font: "Inter", system-ui, sans-serif;
--sunboard-radius: 12px;
/* Checklist card + buttons */
--sunboard-checklist-background: white;
--sunboard-checklist-foreground: #111827;
--sunboard-checklist-border: #e5e7eb;
--sunboard-checklist-primary: #2563eb;
--sunboard-checklist-primary-foreground: white;
--sunboard-checklist-success: #16a34a;
}That's the common case — most teams only change the font, the corner radius, and the primary color to match their product.
If your app already defines design tokens (shadcn variables, or your own), map Sunboard onto them instead of repeating color values. Dark mode then follows automatically whenever your tokens flip:
:root {
--sunboard-checklist-background: var(--card);
--sunboard-checklist-foreground: var(--card-foreground);
--sunboard-checklist-border: var(--border);
--sunboard-checklist-primary: var(--primary);
--sunboard-checklist-primary-foreground: var(--primary-foreground);
/* same pattern for --sunboard-tour-* and --sunboard-hotspot-* */
}Fonts defined on body
If your font variables live on <body> (the default Next.js layout puts
next/font variables there), var(--font-...) resolves to nothing inside a
:root block. Declare your --sunboard-* overrides on body instead; color
tokens still follow a theme class on <html>.
Full variable reference
All variables are optional; any you don't set fall back to the shipped default.
Shared
| Variable | Purpose |
|---|---|
--sunboard-font | Font family for all Sunboard UI |
--sunboard-radius | Corner radius for cards, buttons, and tooltips |
Checklist
| Variable | Purpose |
|---|---|
--sunboard-checklist-background | Card surface |
--sunboard-checklist-foreground | Card text |
--sunboard-checklist-border | Card border |
--sunboard-checklist-shadow | Card shadow |
--sunboard-checklist-muted | Progress track / count pill background |
--sunboard-checklist-muted-foreground | Secondary text |
--sunboard-checklist-primary | Action buttons + progress fill |
--sunboard-checklist-primary-foreground | Text on primary |
--sunboard-checklist-success | Completed step indicator |
Launcher
The collapsed checklist button. These default to the checklist's primary colors, so you usually don't need to set them separately.
| Variable | Purpose |
|---|---|
--sunboard-launcher-background | Launcher button background |
--sunboard-launcher-foreground | Launcher icon |
--sunboard-launcher-shadow | Launcher shadow |
--sunboard-launcher-badge-background | Unfinished-count badge |
--sunboard-launcher-badge-foreground | Badge text |
Tours
Standalone tooltips share this palette — theming the tour restyles both at once.
| Variable | Purpose |
|---|---|
--sunboard-tour-background | Tooltip surface |
--sunboard-tour-foreground | Tooltip text |
--sunboard-tour-border | Tooltip border |
--sunboard-tour-shadow | Tooltip shadow |
--sunboard-tour-muted-foreground | Tooltip secondary text |
--sunboard-tour-primary | Primary (next) button |
--sunboard-tour-primary-foreground | Text on primary button |
--sunboard-tour-secondary-background | Secondary (back) button |
--sunboard-tour-secondary-foreground | Secondary button text |
--sunboard-tour-secondary-border | Secondary button border |
--sunboard-overlay-color | Dimmed page overlay behind an active tour |
Hotspots
| Variable | Purpose |
|---|---|
--sunboard-hotspot-background | Launcher dot |
--sunboard-hotspot-border | Dot border |
--sunboard-hotspot-dot | Inner dot color |
--sunboard-hotspot-shadow | Dot shadow |
--sunboard-hotspot-pulse-ring | Pulse ring color |
Survey
The built-in survey modal's card and inputs read the checklist palette, so it follows your checklist overrides. The only survey-specific variable is the scrim behind it.
| Variable | Purpose |
|---|---|
--sunboard-survey-overlay-color | Scrim behind the centered survey modal |
Dark mode
Because everything is a CSS variable, dark mode is just another set of values under your dark selector — no Sunboard-specific switch:
.dark,
[data-theme="dark"] {
--sunboard-checklist-background: #0b0f19;
--sunboard-checklist-foreground: #e5e7eb;
--sunboard-checklist-border: #1f2937;
--sunboard-tour-background: #0b0f19;
--sunboard-tour-foreground: #e5e7eb;
}Every variable
Here's the complete set with its default values — the block sunboard init
appends to your global stylesheet when it can find one. Paste it into a stylesheet
that loads after @sunboard/react/styles.css and edit any value you like. Keep
the /* Sunboard theme variables */ comment: rerunning sunboard init looks for
it to know the block is already there.
/* Sunboard theme variables */
:root {
/* Shared typography and corner radius for all Sunboard UI. */
--sunboard-font: Inter, sans-serif;
--sunboard-radius: 12px;
/* Checklist card surface. */
--sunboard-checklist-background: white;
--sunboard-checklist-foreground: #111827;
--sunboard-checklist-border: #e5e7eb;
--sunboard-checklist-shadow: 0 4px 12px rgb(0 0 0 / 10%);
/* Checklist secondary text, progress track, and small count pills. */
--sunboard-checklist-muted: #f3f4f6;
--sunboard-checklist-muted-foreground: #6b7280;
/* Checklist action buttons and progress fill. */
--sunboard-checklist-primary: #2563eb;
--sunboard-checklist-primary-foreground: white;
/* Completed checklist step indicator. */
--sunboard-checklist-success: #16a34a;
/* Collapsed checklist launcher button and its unfinished-count badge. */
--sunboard-launcher-background: var(--sunboard-checklist-primary);
--sunboard-launcher-foreground: var(--sunboard-checklist-primary-foreground);
--sunboard-launcher-shadow: var(--sunboard-checklist-shadow);
--sunboard-launcher-badge-background: #ef4444;
--sunboard-launcher-badge-foreground: white;
/* Product tour tooltip surface. */
--sunboard-tour-background: white;
--sunboard-tour-foreground: #111827;
--sunboard-tour-border: #e5e7eb;
--sunboard-tour-shadow: 0 4px 12px rgb(0 0 0 / 10%);
--sunboard-tour-muted-foreground: #6b7280;
/* Product tour primary and secondary buttons. */
--sunboard-tour-primary: #2563eb;
--sunboard-tour-primary-foreground: white;
--sunboard-tour-secondary-background: white;
--sunboard-tour-secondary-foreground: #111827;
--sunboard-tour-secondary-border: #e5e7eb;
/* Dimmed page overlay shown behind an active tour. */
--sunboard-overlay-color: rgb(15 23 42 / 18%);
/* Stronger scrim behind the centered onboarding survey. */
--sunboard-survey-overlay-color: rgb(15 23 42 / 45%);
/* Hotspot launcher dot and pulse ring. */
--sunboard-hotspot-background: #2563eb;
--sunboard-hotspot-border: white;
--sunboard-hotspot-dot: white;
--sunboard-hotspot-shadow: 0 4px 12px rgb(0 0 0 / 10%);
--sunboard-hotspot-pulse-ring: rgb(37 99 235 / 28%);
}Next steps
Revenue & retention
Report conversions and churn from your backend so your onboarding analytics show real money — what a trial is worth and which path pays off.
Analytics integrations
Connect the product analytics you already use and onboarding checkups diagnose from evidence — what dropped users did instead, not just where they dropped.