@wrksz/themes + Base UI•Feedback & Utilities

ThemeProvider Interactive Canvas

Unified application root provider orchestrating @wrksz/themes theme switching, native Base UI Toast & Tooltip providers, and Shadcn Typeset vertical rhythm measurements.

Canvas

Karan UI ThemeProvider

Base UI + @wrksz/themes

Unified provider combining @wrksz/themes, Base UI Toast, Base UI Tooltip, Shadcn Typeset rhythm measurements, and ColorTheme slot.

1. Theme (Dark / Light / Custom)

Active Theme: system (Resolved: )

2. Toast & Tooltip Providers

Automatic Base UI Toaster and TooltipProvider

Notice that no separate <Toaster> or <TooltipProvider> had to be written inside this demo.

3. Typeset Rhythm Measurements (Shadcn Typeset)

Three core controls (size, leading, flow) + measure dynamically adjusting reading rhythm

Presets:

--typeset-size16px

--typeset-leading1.65

--typeset-flow1.25em

--typeset-measure65ch

Typeset Typography Preview

Typeset brings intentional typography and proportional vertical rhythm to rendered content, prose, and chat bubbles.

When you switch presets above (e.g. from compact to reading), the line height, block spacing, and base size adjust instantaneously via CSS variables.

Current Active Color Theme: neutral

4. Geometry & Density Multipliers (Whitespace & Radius)

Realtime global scaling multipliers for element sizing/spacing and border radius

White-Space & Sizing MultiplierScales padding, margin, gap & dimensions (no text)

1.00x

Border Radius MultiplierScales rounded-* values proportionally (excl. none/full)

1.0x

Interactive Elements Reacting LiveWhitespace: 1.00x | Radius: 1.0x

rounded-sm BadgePill Badge

All components automatically respect geometry multipliers without manual styling overrides.

Props Controls

12 props

accentColorOklchColor ({ l, c, h })

tintnumber (0–100%)

chromanumber (0–100%)

defaultTheme'system' | 'light' | 'dark'

enableSystemboolean

Enabled

attribute'class' | 'data-theme' | 'data-mode'

toastboolean | Partial<ToasterProps>

Enabled

tooltipboolean | Partial<TooltipProviderProps>

Enabled

whitespacenumber (0.5–2.0)

radiusnumber (0–3.0)

themesstring[]