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.
"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> ); }
Part of 8bitcn — browse the full library on 21st.dev.