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
When true, applies destructive styling with red background and warning icon
Additional CSS classes to apply to the panel
Content to render inside the panel
Optional subheading content
When true, removes bottom border and padding
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 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