Resizable

Resizable panel layouts with hard-edge styling. The dividers feature solid borders and hard shadows, maintaining the brutalist aesthetic while providing flexible layouts.

Horizontal Layout

Left Panel
Right Panel

With Visible Handle

Sidebar
Main Content

Custom Handle Styles

Arrow Handle

Left
Right

Dots Handle

Left
Right

Line Handle

Left
Right

Chevrons Handle

Left
Right

Colorful Handle

Left
Right

Vertical Custom Handles

Arrow Handle (Vertical)

Top Panel
Bottom Panel

Dots Handle (Vertical)

Top Panel
Bottom Panel

Chevrons Handle (Vertical)

Top Panel
Bottom Panel

Vertical Layout

Header Panel
Content Panel

Three Panel Layout

Left
Center
Right

Nested Layout

Navigation
Main Content
Details Panel

IDE-Style Layout

Explorer

src/

components/

pages/

styles/

public/

package.json

Editor

// Your code here

function Component() {

return <div>Hello</div>

}

Terminal

$ npm run dev

Ready on localhost:3000

Outline

Component

props

state

render()