Components
- AccordionDone
- AlertDone
- Alert DialogDone
- Aspect RatioNo Change
- AvatarDone
- BadgeDone
- BreadcrumbDone
- ButtonDone
- Button GroupDone
- CalendarNo Change
- CardDone
- CarouselDone
- ChartNo Change
- CheckboxDone
- CollapsibleNo Change
- ComboboxDone
- CommandDone
- Context MenuDone
- Data TableDone
- Date PickerDone
- DialogDone
- DrawerDone
- Dropdown MenuDone
- EmptyNo Change
- FieldNo Change
- React Hook FormNo Change
- Hover CardDone
- InputDone
- Input GroupDone
- Input OTPDone
- ItemDone
- KbdDone
- LabelDone
- MenubarDone
- Navigation MenuDone
- PaginationDone
- PopoverDone
- ProgressDone
- Radio GroupDone
- ResizableNo Change
- Scroll AreaNo Change
- SelectDone
- SeparatorDone
- SheetDone
- SidebarNo Change
- SkeletonDone
- SliderDone
- SonnerDone
- SpinnerDone
- SwitchDone
- TableNo Change
- TabsDone
- TextareaDone
- ToastDone
- ToggleDone
- Toggle GroupDone
- TooltipDone
- TypographyDone
Resizable
Split panels with sharp handles and frosted dividers—perfect for log viewers, console layouts, and side-by-side comparisons.
Log explorer
Monitor view
Drag the handles to resize each pane; glass dividers stay crisp in both orientations.
Services
- control-plane
- ingress-gateway
- billing
- reports
Live metrics
Stream duration: 14m 22s — Latency steady at 162ms.
Log tail
02:11:01 edge-cache rewrite enabled 02:11:03 ingress latency 164ms (target 180ms) 02:11:10 billing job completed (duration 48s)
Installation
pnpm dlx shadcn@latest add @omni/resizable
Usage
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@/components/ui/resizable"
<ResizablePanelGroup direction="horizontal">
<ResizablePanel defaultSize={25}>Sidebar</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={75}>Main content</ResizablePanel>
</ResizablePanelGroup>