A
Auralix UI

Resizable

Accessible resizable panel groups and layouts.

Preview

One
Two
Three

Installation

bash
npx auralix-ui add resizable

Usage

Resizable Layout

tsx
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@/components/ui/Resizable";

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>

Props

NameTypeDefaultDescription
direction"horizontal" | "vertical""horizontal"Layout direction.

Variants

Horizontal
One
Two
Vertical
Header
Content
Nested
Sidebar
Top
Bottom
Toggle GroupMarquee