---
title: Panel
description: Panel is a flexible container that groups related content with optional border, padding, and shadow.
category: Layout
related: [Container, Grid, GridContainer, Spacer]
commonPatterns: [card-layout, content-section, bordered-content]
---

Source: https://clickhouse.design/click-ui/panel

# 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

## Props

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

```tsx
import { Panel } from '@clickhouse/click-ui'

function Example() {
return (
  <Panel hasBorder padding="lg" gap="sm">
    Panel content here
  </Panel>
)
}
```

## Quick start

Use Panel to group content with borders or shadows:

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

## Related components

- **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

```tsx
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

```tsx
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

```tsx
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>
)
}
```