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()