Components
Loading preview...
An 8-bit styled resizable panel group with retro pixel borders and a draggable handle, built on react-resizable-panels. Supports horizontal and vertical layouts with optional grip handles.
npx shadcn@latest add https://21st.dev/r/OrcDev/8bit-resizable"use client";
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/8bit-resizable";
export default function Default() {
return (
<div className="flex w-full min-h-screen items-center justify-center bg-background p-8 retro">
<ResizablePanelGroup
direction="horizontal"
className="max-w-md rounded-lg border"
>
<ResizablePanel defaultSize={50}>
<div className="flex h-[200px] items-center justify-center p-6">
<span className="font-semibold">One</span>
</div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={50}>
<div className="flex h-[200px] items-center justify-center p-6">
<span className="font-semibold">Two</span>
</div>
</ResizablePanel>
</ResizablePanelGroup>
</div>
);
}