sheengemologic ui
All components

ResizableHandle

Labeled pointer and keyboard separator between panels.@gemologic/sheen · navigation

Playground

This example has no scalar controls. Its validated source remains interactive below.
Source
Result
<Resizable><ResizablePanel index={0}>Source</ResizablePanel><ResizableHandle index={0} label="Resize source and result" /><ResizablePanel index={1}>Result</ResizablePanel></Resizable>

Variant matrix

Editor separator
Source
Result

Anatomy

Package
@gemologic/sheen
Source
packages/ui/src/primitives/Resizable.tsx
Tokens
  • --sheen-color-border-control
  • --sheen-color-accent-fg
  • --sheen-color-focus-ring
  • --sheen-color-focus-ring-offset

Accessibility

Role: separatorKeyboard: ArrowLeft, ArrowRight, ArrowUp, ArrowDown, Home, End

Do

  • Name both adjacent regions in the label.

Do not

  • Do not remove the separator from the tab order.

Generated props

NameTypeDefaultDescription
label *string—Required accessible name describing both adjacent panels.
index *number—Index of the preceding panel.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.