Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/theopenlane/openlane-ui/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The Panel component provides a bordered container with configurable layout properties. It includes a PanelHeader subcomponent for structured headings and supports a destructive variant with warning icon.

​
Components

​
Panel

Main container component with flexible layout options.
​
gap
0 | 1 | 2 | 4 | 6 | 8
default:"6"
Gap spacing between child elements
​
align
'start' | 'center' | 'end' | 'stretch'
default:"'stretch'"
Vertical alignment of children
​
justify
'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
default:"'start'"
Horizontal justification of children
​
textAlign
'left' | 'center' | 'right'
default:"'left'"
Text alignment within the panel
​
destructive
boolean
When true, applies destructive styling with red background and warning icon
​
className
string
Additional CSS classes to apply to the panel
​
children
React.ReactNode
required
Content to render inside the panel

​
PanelHeader

Header component with heading and optional subheading.
​
heading
React.ReactNode
required
Main heading content
​
subheading
React.ReactNode
Optional subheading content
​
noBorder
boolean
default:"false"
When true, removes bottom border and padding
​
className
string
Additional CSS classes to apply to the header

​
Usage

import { Panel, PanelHeader } from '@repo/ui'

export function Example() {
  return (
    <Panel>
      <PanelHeader 
        heading="Settings" 
        subheading="Manage your preferences" 
      />
      <p>Panel content goes here</p>
    </Panel>
  )
}

​
Examples

​
Basic Panel

<Panel>
  <p>Simple panel content</p>
</Panel>

​
Panel with Header

<Panel gap={8}>
  <PanelHeader 
    heading="User Information" 
    subheading="Update your profile details" 
  />
  <form>
    {/* Form fields */}
  </form>
</Panel>

​
Destructive Panel

<Panel destructive>
  <PanelHeader 
    heading="Warning" 
    subheading="This action cannot be undone" 
    noBorder
  />
  <p>Are you sure you want to delete this item?</p>
</Panel>

​
Centered Panel

<Panel align="center" justify="center" textAlign="center" gap={4}>
  <h3>Welcome</h3>
  <p>Get started with your account</p>
  <button>Continue</button>
</Panel>

​
Custom Layout

<Panel gap={2} justify="between" align="start">
  <div>Left content</div>
  <div>Right content</div>
</Panel>

​
Implementation

Source: /home/daytona/workspace/source/packages/ui/src/panel/panel.tsx

Build docs developers (and LLMs) love

Get started for freeTalk to us