Panel

Region container managing header, content, and footer areas.

Header
Content area
Footer
import { Panel } from "ui-lab-components";
 
export function Example() {
  return (
    <Panel spacing="md">
      <Panel.Header sticky>
        <div className="p-4">Header</div>
      </Panel.Header>
      <Panel.Content>
        <div className="p-4">Content area</div>
      </Panel.Content>
      <Panel.Footer>
        <div className="p-4">Footer</div>
      </Panel.Footer>
    </Panel>
  );
}

Sidebar with Toggle

Left sidebar that collapses and expands via a toggle button in the content area.

import { Panel } from "ui-lab-components";
 
export const metadata = {
  title: "Sidebar with Toggle",
  description: "Left sidebar that collapses and expands via a toggle button in the content area.",
};
 
export default function Example() {
  return (
    <Panel style={{ height: "400px" }} className="w-full border border-background-700 rounded-lg bg-background-900">
      <Panel.Sidebar side="left" defaultOpen width="200px" collapsedWidth="0">
      </Panel.Sidebar>
      <Panel.Content>
        <Panel.Toggle>
          <button>ā˜°</button>
        </Panel.Toggle>
      </Panel.Content>
    </Panel>
  );
}
UI Lab