Resizable Panels.
Adjust the workspace without losing the keyboard.
Root owns the start-panel percentage and bounds. Use exactly one start Panel, one named Handle and one end Panel. The separator supports pointer capture and immediate keyboard resizing; controlled value changes remain with the application.
Make it yours
Preparing the example…
Composition
AnatomyRoot owns the start-panel percentage and bounds. Use exactly one start Panel, one named Handle and one end Panel. The separator supports pointer capture and immediate keyboard resizing; controlled value changes remain with the application.
Resizable.Root (value/defaultValue, min/max, orientation)
├── Resizable.Panel (side=start)
├── Resizable.Handle (named separator)
└── Resizable.Panel (side=end)A place to start
UsageImport the stylesheet once at your application root. This complete example reflects the properties selected above.
Loading example…
Details that make a difference
Examples & statesCorner radii
Contextual rounding applies to the control or surface; large panels stay readable.
Loading source…
The finer details
API referenceGenerated from Dixy’s local TypeScript interfaces. Native HTML attributes and refs are forwarded. The table covers Dixy’s own options.
ResizableRoot
| Prop | Type / description | Default |
|---|---|---|
radius | "none" | "sm" | "md" | "lg" | "full"Inherits the nearest Theme. | — |
as | EOverride the semantic element, e.g. a title heading level. | — |
value | numberSize of the start panel as a percentage, controlled. | — |
defaultValue | numberInitial start-panel percentage. | 50 |
onValueChange | ((value: number) => void)Called during direct manipulation and keyboard resizing. | — |
min | numberMinimum start-panel percentage. | 10 |
max | numberMaximum start-panel percentage. | 90 |
orientation | "horizontal" | "vertical"Split direction. | horizontal |
Built from the same foundations
Styling tokensChange Theme settings above to compare appearance, accent, neutral, radius, spacing density, motion and direction. Override component aliases on a Theme root so custom properties follow portaled content too. The wrapper merges className, style, refs and render composition with its owning primitive.
| Token | Purpose |
|---|---|
--dixy-color-background-surface | The component-specific starting point. |
--dixy-font-label-md | Control label font and line height; body roles remain readable in text inputs. |
--dixy-color-background-selected | Selected surfaces use semantic color across appearances. |
--dixy-color-border-focus | Focus indication remains visible independently of shadows. |
--dixy-spacing-inset-sm | Density-aware component padding. |
--dixy-motion-transition-feedback | Short state feedback, reduced by the inherited motion setting. |
Consider everyone
AccessibilityProvide visible labels and meaningful names. Preserve native semantics, selected/disabled state and visible focus. Target WCAG 2.2 AA; full contrast, assistive-technology and platform verification remains pending.
Target: WCAG 2.2 AA. Automated tests cover selected behavior; manual screen-reader, contrast, and zoom validation remain part of the release checklist.
Build it. Then understand it.
Root owns the start-panel percentage and bounds. Use exactly one start Panel, one named Handle and one end Panel. The separator supports pointer capture and immediate keyboard resizing; controlled value changes remain with the application.
--dixy-color-background-surface