Resizable
Two panes split by a 1px hairline with a small grip.
$149 once · every Pro piece
Customize
Dragging heats the line around the grip and shows the size in mono; near a snap point the handle slows into a detent and settles there on release. Arrow keys step 5%, Home and End go to the limits, double-click resets, and splits nest.
Install
npx shadcn@latest add @obsyde/resizableNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Resizable } from '@/components/obsyde/ember/resizable/Resizable';
export function Example() {
return (
<Resizable />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/resizable/Resizable.tsxcomponentember/resizable/resizable-demo.cssstylesember/resizable/resizable.cssstylesember/resizable/ResizableDemo.tsxdemoember/basics-kit/kit.tssharedember/shared/spring.tssharedember/shared/accent.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
layoutLayout | 'horizontal' | 'vertical' | 'nested' | 'horizontal' |
defaultSizeDefault size | number | 50 |
minMin | number | 15 |
maxMax | number | 85 |
snapSnap points | boolean | true |
stepKey step | number | 5 |