Multi Panel Layout

layout

Configurable multi-panel layout with primary, secondary, and tertiary panes.

Preview

No preview available

Check the code examples below.

Installation

npm install @launchapp/design-system
Import
import { MultiPanelLayout } from "@launchapp/design-system";

Examples

Three-column layout

<MultiPanelLayout  primary={<div className="p-4">Main content</div>}  secondary={<div className="p-4 bg-muted/30">Sidebar</div>}  tertiary={<div className="p-4 bg-muted/20">Inspector</div>}/>

Props

PropTypeDefaultDescription
primary*
React.ReactNodeMain content panel.
secondary
React.ReactNodeSecondary sidebar or detail panel.
tertiary
React.ReactNodeTertiary panel (e.g., inspector).