Components
Resizable
Resizable panel group.
Use ResizablePanelGroup to create adjustable split layouts.
Left
Right
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@tile-ui/react';
export default function ResizableDemo() {
return (
<ResizablePanelGroup direction="horizontal" style={{ height: 140, display: 'flex', width: '100%' }}>
<ResizablePanel style={{ background: 'var(--docs-surface-hover)' }}>Registry install
pnpm dlx shadcn@latest add @tile-ui/resizablePackage usage
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@tile-ui/react';
<ResizablePanelGroup direction="horizontal">
<ResizablePanel>Left</ResizablePanel>
<ResizableHandle />
<ResizablePanel>Right</ResizablePanel>
</ResizablePanelGroup>Highlights
- Horizontal and vertical
- Panel and handle
- Persistent layout id
Registry dependencies
| Item | Purpose |
|---|---|
resizable | Component source and module styles |
core | Framework-agnostic logic helpers |
styles | Shared SCSS tokens and globals |
API reference
ResizablePanelGroup
| Prop | Type | Default |
|---|---|---|
direction | 'horizontal' | 'vertical' | 'horizontal' |
id | string | — |