# Panel

The `panel` component is a versatile [flex](flex.md) container designed to group and organize elements within a layout. Panels are presented as individual tabs that can be moved to different positions by dragging the tabs around. By default, the top-level return of a `@ui.component` is automatically wrapped in a panel, so you only need to define a panel explicitly if you want to customize it. Customizations can include setting a custom tab title, background color or customizing the flex layout.

## Example

```python
from deephaven import ui


@ui.component
def ui_panel():
    text = ui.text_field()

    return ui.panel(text, title="Text Field")


my_panel = ui_panel()
```

## Nesting

Panels can only be nested within [ui.row](dashboard.md#row-api-reference), [ui.column](dashboard.md#column-api-reference), [ui.stack](dashboard.md#stack-api-reference) or [ui.dashboard]().

```python
from deephaven import ui

my_nested_panel = ui.dashboard([ui.panel("A"), ui.panel("B")])
```

## API Reference

A panel is a container that can be used to group elements.

**Returns:** `Element` The rendered panel element.

<ParamTable param={{"module_name": "deephaven.ui.", "name": "panel", "parameters": [{"name": "*children", "type": "Any", "description": "Elements to render in the panel."}, {"name": "title", "type": "str | None", "description": "Title of the panel.", "default": "None"}, {"name": "direction", "type": "Literal['row', 'column', 'row-reverse', 'column-reverse'] | None", "description": "The direction in which to layout children.", "default": "'column'"}, {"name": "wrap", "type": "Literal['wrap', 'nowrap', 'wrap-reverse'] | None", "description": "Whether children should wrap when they exceed the panel's width.", "default": "None"}, {"name": "justify_content", "type": "Literal['start', 'end', 'center', 'left', 'right', 'space-between', 'space-around', 'space-evenly', 'stretch', 'baseline', 'first baseline', 'last baseline', 'safe center', 'unsafe center'] | None", "description": "The distribution of space around items along the main axis.", "default": "None"}, {"name": "align_content", "type": "Literal['start', 'end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch', 'baseline', 'first baseline', 'last baseline', 'safe center', 'unsafe center'] | None", "description": "The distribution of space between and around items along the cross axis.", "default": "None"}, {"name": "align_items", "type": "Literal['start', 'end', 'center', 'stretch', 'self-start', 'self-end', 'baseline', 'first baseline', 'last baseline', 'safe center', 'unsafe center'] | None", "description": "The alignment of children within their container.", "default": "'start'"}, {"name": "gap", "type": "str | float | None", "description": "The space to display between both rows and columns of children.", "default": "'size-100'"}, {"name": "column_gap", "type": "str | float | None", "description": "The space to display between columns of children.", "default": "None"}, {"name": "row_gap", "type": "str | float | None", "description": "The space to display between rows of children.", "default": "None"}, {"name": "overflow", "type": "Literal['visible', 'hidden', 'clip', 'scroll', 'auto'] | str | None", "description": "Specifies what to do when the elment's content is too long to fit its size.", "default": "'auto'"}, {"name": "padding", "type": "str | float | None", "description": "The padding to apply around the element.", "default": "'size-100'"}, {"name": "padding_top", "type": "str | float | None", "description": "The padding to apply above the element.", "default": "None"}, {"name": "padding_bottom", "type": "str | float | None", "description": "The padding to apply below the element.", "default": "None"}, {"name": "padding_start", "type": "str | float | None", "description": "The padding to apply before the element.", "default": "None"}, {"name": "padding_end", "type": "str | float | None", "description": "The padding to apply after the element.", "default": "None"}, {"name": "padding_x", "type": "str | float | None", "description": "The padding to apply to the left and right of the element.", "default": "None"}, {"name": "padding_y", "type": "str | float | None", "description": "The padding to apply to the top and bottom of the element.", "default": "None"}, {"name": "background_color", "type": "Literal['gray-50', 'gray-75', 'gray-100', 'gray-200', 'gray-300', 'gray-400', 'gray-500', 'gray-600', 'gray-700', 'gray-800', 'gray-900', 'red-100', 'red-200', 'red-300', 'red-400', 'red-500', 'red-600', 'red-700', 'red-800', 'red-900', 'red-1000', 'red-1100', 'red-1200', 'red-1300', 'red-1400', 'orange-100', 'orange-200', 'orange-300', 'orange-400', 'orange-500', 'orange-600', 'orange-700', 'orange-800', 'orange-900', 'orange-1000', 'orange-1100', 'orange-1200', 'orange-1300', 'orange-1400', 'yellow-100', 'yellow-200', 'yellow-300', 'yellow-400', 'yellow-500', 'yellow-600', 'yellow-700', 'yellow-800', 'yellow-900', 'yellow-1000', 'yellow-1100', 'yellow-1200', 'yellow-1300', 'yellow-1400', 'chartreuse-100', 'chartreuse-200', 'chartreuse-300', 'chartreuse-400', 'chartreuse-500', 'chartreuse-600', 'chartreuse-700', 'chartreuse-800', 'chartreuse-900', 'chartreuse-1000', 'chartreuse-1100', 'chartreuse-1200', 'chartreuse-1300', 'chartreuse-1400', 'celery-100', 'celery-200', 'celery-300', 'celery-400', 'celery-500', 'celery-600', 'celery-700', 'celery-800', 'celery-900', 'celery-1000', 'celery-1100', 'celery-1200', 'celery-1300', 'celery-1400', 'green-100', 'green-200', 'green-300', 'green-400', 'green-500', 'green-600', 'green-700', 'green-800', 'green-900', 'green-1000', 'green-1100', 'green-1200', 'green-1300', 'green-1400', 'seafoam-100', 'seafoam-200', 'seafoam-300', 'seafoam-400', 'seafoam-500', 'seafoam-600', 'seafoam-700', 'seafoam-800', 'seafoam-900', 'seafoam-1000', 'seafoam-1100', 'seafoam-1200', 'seafoam-1300', 'seafoam-1400', 'cyan-100', 'cyan-200', 'cyan-300', 'cyan-400', 'cyan-500', 'cyan-600', 'cyan-700', 'cyan-800', 'cyan-900', 'cyan-1000', 'cyan-1100', 'cyan-1200', 'cyan-1300', 'cyan-1400', 'blue-100', 'blue-200', 'blue-300', 'blue-400', 'blue-500', 'blue-600', 'blue-700', 'blue-800', 'blue-900', 'blue-1000', 'blue-1100', 'blue-1200', 'blue-1300', 'blue-1400', 'indigo-100', 'indigo-200', 'indigo-300', 'indigo-400', 'indigo-500', 'indigo-600', 'indigo-700', 'indigo-800', 'indigo-900', 'indigo-1000', 'indigo-1100', 'indigo-1200', 'indigo-1300', 'indigo-1400', 'purple-100', 'purple-200', 'purple-300', 'purple-400', 'purple-500', 'purple-600', 'purple-700', 'purple-800', 'purple-900', 'purple-1000', 'purple-1100', 'purple-1200', 'purple-1300', 'purple-1400', 'fuchsia-100', 'fuchsia-200', 'fuchsia-300', 'fuchsia-400', 'fuchsia-500', 'fuchsia-600', 'fuchsia-700', 'fuchsia-800', 'fuchsia-900', 'fuchsia-1000', 'fuchsia-1100', 'fuchsia-1200', 'fuchsia-1300', 'fuchsia-1400', 'magenta-100', 'magenta-200', 'magenta-300', 'magenta-400', 'magenta-500', 'magenta-600', 'magenta-700', 'magenta-800', 'magenta-900', 'magenta-1000', 'magenta-1100', 'magenta-1200', 'magenta-1300', 'magenta-1400', 'negative', 'notice', 'positive', 'info', 'accent', 'accent-100', 'accent-200', 'accent-300', 'accent-400', 'accent-500', 'accent-600', 'accent-700', 'accent-800', 'accent-900', 'accent-1000', 'accent-1100', 'accent-1200', 'accent-1300', 'accent-1400', 'bg', 'content-bg', 'subdued-content-bg', 'surface-bg', 'fg'] | str | None", "description": "The background color of the element.", "default": "None"}, {"name": "UNSAFE_class_name", "type": "str | None", "description": "A CSS class to apply to the element.", "default": "None"}, {"name": "UNSAFE_style", "type": "Dict[str, Any] | None", "description": "A CSS style to apply to the element.", "default": "None"}, {"name": "key", "type": "str | None", "description": "A unique identifier used by React to render elements in a list.", "default": "None"}]}} />