Fabrials UI

Loading state

Navigation

Drag the line, or focus it and use the arrow keys, Home and End.

Installation

Import the control from @fabrials/ui, after setting the app up.

TypeScript

import { ResizablePanelGroup, ResizablePanel, ResizableHandle, useResizableGroupRef } from "@fabrials/ui";

Or install it under shadcn's name, so code that imports @/components/ui/resizable gets this control. See shims.
```
npx shadcn@latest add @fabrials/resizable
```

API reference

Prop / export	Type	Description
`ResizablePanelGroup orientation`	`horizontal \| vertical`	direction is accepted as shadcn's name.
`ResizablePanelGroup resizeTargetMinimumSize`	`{ fine, coarse }`	The hit target of a handle, 10 px for a mouse and 24 px for touch by default: bigger than the 1 px line.
`ResizablePanelGroup onLayoutChanged`	`(layout, meta) => void`	Save the layout here when meta.isUserInteraction is true. A double click on a handle resets the layout anywhere in its hit target; the library does not call that a user interaction, so the wrapper reports it as one.
`ResizablePanel defaultSize / minSize / maxSize`	`number \| string`	Percent, or a string with a unit such as 18rem.
`ResizableHandle label / disabled`	`string / boolean`	The handle's name (give every handle one); disabled is transparent and leaves the tab order.

Behavior

A 1 px hairline; hover, drag and keyboard focus draw a 3 px Stormlight line. Arrow keys resize by a fixed step, Home and End jump to the limits. Built on react-resizable-panels.

Accessibility

Keyboard and contrast

Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.