Back to Panel
View full API on Panel
Panel
Header
Leading visual, title and description.
General settings
Update your workspace name and timezone.
Form fields would go here.
API
| Prop | Type | Default | Description |
|---|---|---|---|
| title / description | React.ReactNode | — | Header title and supporting text. |
| leftIcon / rightIcons | PanelIconAction / PanelIconAction[] | — | Header icon buttons with optional tooltips. |
| leftContent / rightContent | React.ReactNode | — | Free-form header slots. |
| leftDetails / rightDetails | PanelDetail[] | — | Badge, icon, and text metadata. |
| footer | React.ReactNode | — | Footer action row. |
| variant | "default" | "elevated" | "borderless" | default | Border/shadow treatment. |
| collapsible | boolean | false | Makes the header a toggle and animates the content. |
| open / defaultOpen | boolean | true | Controlled / uncontrolled open state. |
| onOpenChange | (open: boolean) => void | — | Fires when the panel is toggled. |
| noPadding | boolean | false | Removes default body padding. |
| disabled | boolean | false | Disables header interactions. |