https://github.com/kumarjitdas/kd-resizable
Lightweight, accessible React resizable panel component — zero runtime dependencies beyond React.
https://github.com/kumarjitdas/kd-resizable
nodejs react-component reactjs typescript vite
Last synced: 2 months ago
JSON representation
Lightweight, accessible React resizable panel component — zero runtime dependencies beyond React.
- Host: GitHub
- URL: https://github.com/kumarjitdas/kd-resizable
- Owner: KumarjitDas
- License: bsd-3-clause
- Created: 2026-04-25T20:10:11.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-26T21:43:45.000Z (2 months ago)
- Last Synced: 2026-04-27T14:29:47.030Z (2 months ago)
- Topics: nodejs, react-component, reactjs, typescript, vite
- Language: TypeScript
- Homepage: https://kumarjitdas.github.io/#/projects/kd-resizable
- Size: 36.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
Awesome Lists containing this project
README
# kd-resizable
[](https://www.npmjs.com/package/@kumarjitdas/kd-resizable)
[](https://bundlephobia.com/package/@kumarjitdas/kd-resizable@1.0.0)
[](./LICENSE.txt)
Lightweight, accessible React resizable panel component — zero runtime dependencies beyond React.
**[Website](https://github.com/KumarjitDas/kd-resizable) · [Live Demo](https://kumarjitdas.github.io/kd-resizable) · [npm](https://www.npmjs.com/package/@kumarjitdas/kd-resizable)**
---
## Features
- Horizontal & vertical splits
- Nestable groups (e.g. IDE-style three-pane layout)
- `minSize` / `maxSize` constraints per panel — sizes always sum to 100 %
- Keyboard accessible — arrow keys resize, correct ARIA roles (`separator`)
- Dark mode via CSS custom properties, no extra setup
- ~8 kB minified · ~3 kB gzipped · zero runtime dependencies
## Installation
```sh
npm install kd-resizable
# or
pnpm add kd-resizable
```
## Usage
Import the components and the stylesheet:
```tsx
import {
ResizablePanelGroup,
ResizablePanel,
ResizableHandle,
} from "kd-resizable";
import "kd-resizable/style.css";
function App() {
return (
);
}
```
### Nested groups
```tsx
```
## API
### `ResizablePanelGroup`
| Prop | Type | Default | Description |
| ----------- | ---------------------------- | -------------- | ------------------------------------------------------ |
| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | Split axis |
| `onLayout` | `(sizes: number[]) => void` | — | Fires on every resize with the current panel sizes (%) |
| `className` | `string` | — | Added to the container `
` |
| `style` | `CSSProperties` | — | Inline style on the container `` |
### `ResizablePanel`
| Prop | Type | Default | Description |
| ------------- | --------------- | ------------------ | --------------------------------- |
| `defaultSize` | `number` | evenly distributed | Initial size in `%` |
| `minSize` | `number` | `0` | Minimum size in `%` |
| `maxSize` | `number` | `100` | Maximum size in `%` |
| `className` | `string` | — | Added to the panel `
` |
| `style` | `CSSProperties` | — | Inline style on the panel `` |
### `ResizableHandle`
| Prop | Type | Default | Description |
| ------------ | --------------- | ------- | ------------------------------------------------ |
| `withHandle` | `boolean` | `false` | Show the grip badge in the centre of the divider |
| `className` | `string` | — | Added to the handle `
` |
| `style` | `CSSProperties` | — | Inline style on the handle `` |
## Keyboard support
Focus any handle (Tab), then use:
| Key | Action |
| --------- | ------------------------- |
| `←` / `→` | Resize (horizontal group) |
| `↑` / `↓` | Resize (vertical group) |
Each key press moves the split by 1 %, clamped by `minSize` / `maxSize`.
## Theming
All visual properties are CSS custom properties. Set them on `.kd-resizable-handle`
or any ancestor to scope overrides:
```css
.kd-resizable-handle {
--kd-handle-size: 1px; /* divider thickness */
--kd-handle-bg: #e2e8f0;
--kd-handle-hover-bg: #94a3b8;
--kd-focus-ring: #3b82f6;
--kd-grip-bg: #fff;
--kd-grip-border: #e2e8f0;
--kd-grip-color: #94a3b8;
--kd-grip-hover-border: #94a3b8;
--kd-grip-hover-color: #475569;
}
```
Dark mode overrides are included by default via `@media (prefers-color-scheme: dark)`.
## Browser support
All browsers that support the [Pointer Events API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) (Chrome 55+, Firefox 59+, Safari 13+, Edge 79+).
## License
[BSD-3-Clause](https://img.shields.io/badge/license-BSD--3--Clause-blue.svg) © [Kumarjit Das](https://github.com/KumarjitDas)
## Contact
- Twitter: [@kumarjitdas1902](https://x.com/kumarjitdas1902)
- LinkedIn: [Kumarjit Das](https://www.linkedin.com/in/kumarjit-das)
- E-Mail: [kumarjitdas1999@gmail.com](mailto:kumarjitdas1999+github@gmail.com)