Resizable

Fine Clay style resizable panel component with clean borders.

Horizontal Split

Panel A
Panel B

Vertical Split

Top Panel
Bottom Panel

Custom Handle Styles

Dots

Left
Right

Line

Left
Right

Pill

Left
Right

Arrow

Left
Right

Multi Panel

Sidebar
Content
Details

With Min/Max Size

Left panel: min 20%, max 40%

Min 20% / Max 40%
Flexible Panel

Nested Panels

Navigation
Editor
Terminal

IDE Layout

Explorer

src
index.tsx
app.tsx
components
button.tsx
button.tsx
export function Button({ children }) {
  return (
    <button className="px-4 py-2">
      {children}
    </button>
  )
}
Terminal

$ npm run dev

ready - localhost:3000

Properties

Component

Button

File

button.tsx

Size

1.2 KB

Simple Divider

Left
Right

Colorful Panels

🍬Bubblegum
🌿Mint
🍋Lemon