01
See it and copy it
Framework example
Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.
Drag a separator or focus it and use Arrow Left / Arrow Right.
Double-click a separator to reset pane sizes.
Framework usage
Switch targets to compare the adapter code. The preview stays visually stable because all three packages share the same tokens andui-* class contract.---
import {
Kbd,
Resizable
} from '@santi020k/lumen-astro'
---
<Resizable
aria-label="Workspace panes"
defaultSizes={[28, 44, 28]}
minSize={[18, 24, 18]}
style="height: 18rem;"
>
<aside>
<strong>Navigation</strong>
<p>Projects, files, and saved views.</p>
</aside>
<section aria-label="Editor">
<strong>Editor</strong>
<p>Drag a separator or focus it and use <Kbd>Arrow Left</Kbd> / <Kbd>Arrow Right</Kbd>.</p>
</section>
<section>
<strong>Preview</strong>
<p>Double-click a separator to reset pane sizes.</p>
</section>
</Resizable>import { Kbd, Resizable } from '@santi020k/lumen-react'
export const Example = () => (
<>
<Resizable
aria-label="Workspace panes"
defaultSizes={[28, 44, 28]}
minSize={[18, 24, 18]}
style={{ height: '18rem' }}
>
<aside>
<strong>Navigation</strong>
<p>Projects, files, and saved views.</p>
</aside>
<section aria-label="Editor">
<strong>Editor</strong>
<p>Drag a separator or focus it and use <Kbd>Arrow Left</Kbd> / <Kbd>Arrow Right</Kbd>.</p>
</section>
<section>
<strong>Preview</strong>
<p>Double-click a separator to reset pane sizes.</p>
</section>
</Resizable>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-resizable
aria-label="Workspace panes"
defaultSizes={[28, 44, 28]}
minSize={[18, 24, 18]}
style="height: 18rem;"
>
<aside>
<strong>Navigation</strong>
<p>Projects, files, and saved views.</p>
</aside>
<section aria-label="Editor">
<strong>Editor</strong>
<p>Drag a separator or focus it and use <lumen-kbd>Arrow Left</lumen-kbd> / <lumen-kbd>Arrow Right</lumen-kbd>.</p>
</section>
<section>
<strong>Preview</strong>
<p>Double-click a separator to reset pane sizes.</p>
</section>
</lumen-resizable>02
Choose your target
Add this component
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add Resizablelumen add Resizablepnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add Resizable --target reactlumen add Resizable --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add Resizable --target elementslumen add Resizable --target elementsAPI reference
Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.
| Attribute | Values | Default | Description |
|---|---|---|---|
| defaultSizes | number[] | - | Sets initial pane sizes as percentages, serialized for the runtime. |
| direction | "horizontal" | "vertical" | "horizontal" | Sets the resize axis and generated handle orientation. |
| maxSize | number | number[] | - | Limits pane growth by percentage; pass an array for per-pane limits. |
| minSize | number | number[] | - | Limits pane shrinkage by percentage; pass an array for per-pane limits. |
| resetOnDoubleClick | boolean | true | Restores default pane sizes when a resize handle is double-clicked. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |
Keyboard interactions
Keyboard behavior provided by the Astro UIPrimitives runtime for this component.
| Key | Action |
|---|---|
| ArrowLeft, ArrowRight on a horizontal handle | Resize the leading panel by 2 percentage points, or 10 with Shift held. |
| ArrowUp, ArrowDown on a vertical handle | Resize the leading panel by 2 percentage points, or 10 with Shift held. |
| Home, End on a handle | Resize the leading panel to its configured minimum or maximum size. |