Themes

Choose a theme and every component updates. Use the header toggle for light and dark.

Your theme

Start from any theme in the sidebar, tune its colors, pick fonts, then save it or copy the code. Your choice applies to every page of these docs until you reset it.

Colors

Start from a color

#3b5bdb

Palette

Tint the greys with the primary color

Primary

Secondary

Neutral

Radiant Default

Fine-tune

OKLCH derives each color scale from the primary and neutral hues, with secondary offset from primary; three geometry values adjust density, corners, and borders.

Select Radiant Default in the theme menu to explore these controls.

Primary hue275°

Secondary offset40°

Neutral hue265°

Neutral tint1.3×

Density1.00×

Corner radius0.70×

Border opacity11%

:root {
	--rui-primary: oklch(52% 0.19 275);
	--rui-secondary: oklch(from var(--rui-primary) 63.5% 0.095 calc(h + 40));
	--rui-neutral: oklch(62% calc(0.014 * var(--rui-neutral-tint, 1)) 265);
	--rui-neutral-tint: 1.3;
	--rui-density: 1;
	--rui-radius-scale: 0.7;
	--rui-border-alpha: 11%;
}

Save

Saved themes stay in this browser and appear in the sidebar.

Fonts

Type to search every Fontsource font.

Use it in your project

pnpm add @ecopages/radiant-ui

@import 'tailwindcss';
@import '@ecopages/radiant-ui/themes/default';
@import '@ecopages/radiant-ui/styles.css';

Fonts load from the Fontsource CDN here, so the preview needs a connection. Your project bundles them from npm instead.

Your theme

Colors

Start from a color

Palette

Fine-tune

Save

Fonts

Use it in your project

Actions

Forms

Layout

Button

Radiant UI

Navigation

Workspace

Overview

Configuration

Design tokens

Next steps

Overlays

Feedback

Data display