Carregando…

Side Panel

Layout

Collapsible side panel layout with main content, configurable width and open state.

Side Panel — collapsible split layout

Navigation

Main Content

Click the toggle button on the panel edge to collapse/expand the side panel.

Instalação via CLI

$ npx kikitocn add side-panel

Interno:

@/lib/utils

Exemplo de uso

Side PanelExample.tsx

import { SidePanel } from "@/components/ui/cn/side-panel/SidePanel";

export function SidePanelExample() {
  return (
    <SidePanel />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`panel*`	`ReactNode`	—	Conteúdo do painel lateral
`children*`	`ReactNode`	—	Conteúdo principal
`open`	`boolean`	`undefined`	Controla se o painel está aberto (controlled)
`defaultOpen`	`boolean`	`true`	Estado inicial (uncontrolled)
`onOpenChange`	`(open: boolean) => void`	`undefined`	Callback quando o estado muda
`side`	`'left' \| 'right'`	`'left'`	Lado onde o painel aparece
`panelWidth`	`number`	`280`	Largura em px quando aberto
`collapsedWidth`	`number`	`0`	Largura em px quando colapsado

Carregando…