Resizable

Resizable panes with accessible separators and bounded panel sizes.

CoreLayout & Containers@gaudi/design-system/core/ResizableView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { ResizableHandle } from '@gaudi/design-system/core/Resizable';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/resizable-editor-workspace.json.

Usage

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@gaudi/design-system/core/Resizable';
<ResizablePanelGroup orientation='horizontal'>  <ResizablePanel defaultSize='30%'>{navigation}</ResizablePanel>  <ResizableHandle aria-label='Resize navigation' />  <ResizablePanel>{content}</ResizablePanel></ResizablePanelGroup>

Examples

Editor workspace

Storybook

Handle styles

Storybook

API

7 props

Accessibility

Separators support keyboard resizing. Keep minimum sizes large enough for panel content and retain a way to restore collapsed panes.

DirectionScopes text direction for Gaudi controls that need directional keyboard and placement behavior.AccordionRich disclosure for FAQs, settings, member directories, nested help, and guided setup. Eleven patterns use Gaudi tokens, icons, avatars, cards, and pills.12 examples CarouselCarousel renders standard feature slides and editorial card rails.4 examples ScrollAreaContained scrolling with themed scrollbars and optional smooth wheel motion for article reading.2 examples SortableReorder lists and grids with drag handles, keyboard controls and cancellation.4 examples