Resizable theming

Every cosmetic value Resizable renders is a --rozie-resizable-* custom property with a built-in fallback, so the component works with zero configuration and stays fully re-skinnable. The structural rules compile per-leaf and are not consumer-overridable — only the values below flow through tokens.

.rozie-resizable {
  --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)
--rozie-resizable-handle-active-bg	var(--rozie-resizable-accent)

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

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 real package running in the page.