All components
Surfaces
Panel
The workhorse surface — a frosted glass panel with an optional eyebrow header and actions.
Preview
Preview
light
Panel title
Frosted glass surface with a hairline eyebrow header.
dark
Panel title
Frosted glass surface with a hairline eyebrow header.
Code
<Panel title="Panel title" actions={<Button size="sm" variant="ghost">Action</Button>}>
Frosted glass surface with an eyebrow header.
</Panel>Import from @/components/ui.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | String renders as an eyebrow header. |
actions | ReactNode | — | Right side of the header. |
ring | boolean | false | Gradient hairline border. |
noPadding | boolean | false | Remove body padding. |
Usage
Do
- Group related content in a panel with a clear eyebrow title.
Don't
- Nest panels more than one level deep.