Build consistent interfaces with theme-aware tokens.

Boreal UI provides a flexible theming system built on SCSS variables, global style defaults, and ThemeProvider. The Next build can resolve its saved theme cookie on the server so the correct variables are present before hydration.

SCSS ArchitectureDynamic SchemesGlobal Defaults

Start with the core styling systems.

SCSS Variables

Open

Base design tokens for colors, spacing, typography, radius, shadows, and component styling.

_variables.scss

$primary-color: #006a6a;
$secondary-color: #a03e40;
$border-radius-lg: 12px;

Schemes and Themes

Open

Built-in color palettes, theme props, state colors, and custom color scheme configuration.

PrimarySecondaryTertiarySurface

Custom Color Schemes

Open

Create, register, and apply your own brand palettes with ThemeProvider and custom scheme options.

Brand SchemeCustom

Color Scheme Designer

Open

Input palette colors and preview how ThemeProvider-resolved text colors render across components.

Theme decisions flow through every component.

Dashboard-ready styling

Use the same palette, spacing, shadow, and radius variables to keep product screens visually connected.

Component-level control

Set project defaults with borealConfig, then use component props and custom schemes for intentional local overrides.

Want to Dive Deeper?

See themes applied to real components.

Explore the Components section to see how Boreal UI themes, variants, and design tokens work together.

Components Section