Panel

Panel is a flexible container that groups related content with optional border, padding, and shadow. It’s perfect for creating cards, content sections, and structured layouts.

Example

Bordered Panel

This panel demonstrates the default bordered style.

Shadow Panel

This panel uses a drop shadow to elevate it above the page.

Props

Prop	Type	Default value	Description
Prop hasBorder	Type boolean	Default value false	Description Whether to display a border around the panel
Prop hasShadow	Type boolean	Default value false	Description Whether to display a drop shadow to elevate the panel above the page
Prop padding	Type 'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	Default value 'md'	Description Internal padding of the panel using predefined size tokens
Prop gap	Type 'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	Default value 'sm'	Description Spacing between child elements within the panel
Prop orientation	Type 'horizontal' \| 'vertical'	Default value 'horizontal'	Description Layout direction - whether children are arranged horizontally or vertically
Prop alignItems	Type 'start' \| 'center' \| 'end' \| 'stretch'	Default value 'center'	Description Vertical alignment of items within the panel (cross-axis alignment)
Prop fillWidth	Type boolean	Default value false	Description Whether the panel should take up the full width of its container
Prop fillHeight	Type boolean	Default value false	Description Whether the panel should take up the full height of its container

Quick Start

Use Panel to group content with borders or shadows:

<Panel hasBorder padding='lg' gap='md'>
<Text size='lg'>Title</Text>
<Text>Content</Text>
</Panel>

Container: Use Container inside Panel for structured layouts
Grid: Use Grid to create responsive panel layouts
GridContainer: Use GridContainer for CSS Grid-based panel arrangements
Spacer: Use Spacer for simple spacing within panels

Common Use Cases

Card with Border

Card Title

This is a card-style panel with a border and padding.

import { Panel, Text, Button } from '@clickhouse/click-ui'

function CardPanel() {
return (
  <Panel hasBorder padding='lg' gap='md'>
    <Text size='lg' weight='bold'>Card Title</Text>
    <Text>Card content</Text>
    <Button type='primary' label='Action' />
  </Panel>
)
}

Elevated Panel with Shadow

Elevated Content

This panel uses a shadow to create visual elevation.

import { Panel, Text } from '@clickhouse/click-ui'

function ShadowPanel() {
return (
  <Panel hasShadow padding='lg' gap='md'>
    <Text size='lg'>Elevated Content</Text>
    <Text>Panel content</Text>
  </Panel>
)
}

Content Section

Section Title

First item

Second item

Third item

import { Panel, Text, Container } from '@clickhouse/click-ui'

function ContentSection() {
return (
  <Panel hasBorder padding='lg' gap='md' fillWidth>
    <Text size='lg'>Section Title</Text>
    <Container orientation='vertical' gap='sm'>
      <Text>Content items</Text>
    </Container>
  </Panel>
)
}

Grid Container Text Field