Resizable theming

The values listed below are exposed as --rozie-resizable-* custom properties, each with a built-in fallback, so Resizable works with zero configuration and re-skins by remapping tokens. The structural rules compile per-leaf and are not consumer-overridable.

:root {
  --rozie-resizable-font: inherit;
  --rozie-resizable-accent: #0066cc;
  --rozie-resizable-handle-size: 0.5rem;
  --rozie-resizable-size: 50%;
}

Tokens

typography

Token	Default
--rozie-resizable-font	inherit

accent — the single color most consumers will set; the active handle + focus ring derive from it

Token	Default
--rozie-resizable-accent	#0066cc

the handle (the draggable divider)

Token	Default
--rozie-resizable-handle-size	0.5rem
--rozie-resizable-handle-bg	rgba(0, 0, 0, 0.08)
--rozie-resizable-handle-hover-bg	rgba(0, 0, 0, 0.16)

the first panel's basis along the split axis

Token	Default
--rozie-resizable-size	50%

the default grip (the short centered bar)

Token	Default
--rozie-resizable-grip-bg	rgba(0, 0, 0, 0.35)
--rozie-resizable-grip-thickness	2px
--rozie-resizable-grip-length	1.5rem

focus ring (keyboard focus on the handle)

Token	Default
--rozie-resizable-focus-ring-width	2px
--rozie-resizable-focus-ring-color	rgba(0, 102, 204, 0.5)

disabled

Token	Default
--rozie-resizable-disabled-opacity	0.55

Defaulted where Resizable reads them

Public, but declared nowhere by base.css: the fallback below applies only while no scope sets the token, and it is resolved at the component itself — so it follows a value set on any ancestor (a token it defaults to included).

Token	Default
--rozie-resizable-handle-active-bg	var(--rozie-resizable-accent, #0066cc)

Design-system bridges

Each package ships token presets that map Resizable's tokens onto a known design system's published CSS variables — import base.css first, then a bridge:

import '@rozie-ui/resizable-react/themes/base.css';
import '@rozie-ui/resizable-react/themes/bootstrap.css';
import '@rozie-ui/resizable-react/themes/material.css';
import '@rozie-ui/resizable-react/themes/shadcn.css';

See also

• Resizable — showcase & API — the full prop / event / slot / handle reference.
• Resizable — API reference — every prop, event, slot, and handle verb.
• Resizable — usage examples — idiomatic per-framework consumption code.
• Resizable comparison — how it stacks up against the per-framework libraries.
• Resizable — live demo — the Vue leaf's workspace build running in the page (not yet the published npm package).