Getting Started
AI-Assisted Development
Governance
Components
Search for a command to run or a page to navigate to.
Manages the layout and resize behavior for multiple panels. Panels can be arranged horizontally or vertically, and users can drag handles between panels to adjust their sizes dynamically.
import { Resizable } from "@strongtie/design-system/resizable"This module exports the following components:
ResizablePanelGroupResizablePanelResizableHandle<ResizablePanel>| Prop | Type | Default | Description |
|---|---|---|---|
collapsedSize | string | number | - | Panel size when collapsed; defaults to 0%. |
collapsible | boolean | - | This panel can be collapsed. ℹ️ A collapsible panel will collapse when it's size is less than of the specified minSize |
defaultSize | string | number | - | Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels. ⚠️ Percentage based sizes may cause slight layout shift when server-rendering. For more information see the documentation. |
disabled | boolean | - | When disabled, a panel cannot be resized either directly or indirectly (by resizing another panel). |
elementRef | Ref<HTMLDivElement | null> | - | Ref attached to the root HTMLDivElement. |
groupResizeBehavior | preserve-relative-size | preserve-pixel-size | - | How should this Panel behave if the parent Group is resized? Defaults to preserve-relative-size. - preserve-relative-size: Retain the current relative size (as a percentage of the Group) - preserve-pixel-size: Retain its current size (in pixels) ℹ️ Panel min/max size constraints may impact this behavior. ⚠️ A Group must contain at least one Panel with preserve-relative-size resize behavior. |
maxSize | string | number | - | Maximum size of Panel within its parent group; defaults to 100%. |
minSize | string | number | - | Minimum size of Panel within its parent group; defaults to 0%. |
onResize | ((panelSize: PanelSize, id: string | number, prevPanelSize: PanelSize) => void) ... | - | Called when panel sizes change. @param panelSize Panel size (both as a percentage of the parent Group and in pixels) @param id Panel id (if one was provided as a prop) @param prevPanelSize Previous panel size (will be undefined on mount) |
panelRef | Ref<PanelImperativeHandle | null> | - | Exposes the following imperative API: - collapse(): void - expand(): void - getSize(): number - isCollapsed(): boolean - resize(size: number): void ℹ️ The usePanelRef and usePanelCallbackRef hooks are exported for convenience use in TypeScript projects. |
import { Resizable } from "@strongtie/design-system/resizable"
export default function Example() {
return <Resizable>{/* Your content here */}</Resizable>
}Components can be styled using the className prop. The design system uses Tailwind CSS for styling.
CSS classes used by this component:
resizable-handleresizable-panelresizable-panel-groupEnsure proper accessibility attributes are added when implementing this component.