PanelToggle

A thin divider button for toggling side panels. When the panel is collapsed, the label is displayed vertically; when expanded, a chevron appears on hover.

Import

import { PanelToggle } from "@run0/jiki-ui";

Props

Prop	Type	Default	Description
`collapsed`	`boolean`	—	Whether the panel is currently collapsed
`onClick`	`() => void`	—	Toggle callback
`label`	`string`	—	Label text (shown vertically when collapsed)
`side`	`"left" \| "right"`	`"left"`	Which side the panel is on
`accentColor`	`AccentColor`	`"emerald"`	Theme color for label and chevron

Usage

const [collapsed, setCollapsed] = useState(false);

<PanelToggle
  collapsed={collapsed}
  onClick={() => setCollapsed(!collapsed)}
  label="Files"
  side="left"
  accentColor="blue"
/>

Demo

Files

src/index.ts

src/App.tsx

package.json

Main content area

import { useState } from "react";
import { PanelToggle } from "@run0/jiki-ui";

export default function PanelToggleDemo() {
const [collapsed, setCollapsed] = useState(false);

return (
  <div
    style={{ display: "flex", height: 200, borderRadius: 8, overflow: "hidden" }}
    className="border border-zinc-800"
  >
    {!collapsed && (
      <div className="w-48 bg-zinc-900 p-4 text-sm text-zinc-400">
        <p className="font-medium text-zinc-300 mb-2">Files</p>
        <p>src/index.ts</p>
        <p>src/App.tsx</p>
        <p>package.json</p>
      </div>
    )}
    <PanelToggle
      collapsed={collapsed}
      onClick={() => setCollapsed(!collapsed)}
      label="Files"
      side="left"
      accentColor="emerald"
    />
    <div className="flex-1 bg-zinc-950 p-4 text-sm text-zinc-400">
      <p>Main content area</p>
    </div>
  </div>
);
}