---
title: Panel
description: A tinted block that groups a short message with its actions, or a few details.
---

```tsx
import { Button, Panel } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function PanelBasic() {
  return (
    <Preview stack={true}>
      <Panel.Root>
        Description
        <Button.Root>Action</Button.Root>
      </Panel.Root>
    </Preview>
  );
}
```

- Use a panel to group a short message with its actions, as on sign-in and onboarding cards, or a short list of details, such as an audit event's fields.
- It is set apart by its inset fill, never by a border.
- For a titled section of a product page, use a [Block](/deft/components/block). For a note inside the content, use a [Callout](/deft/components/callout).

## API

| Prop | Type | Default | Description |
| - | - | - | - |
| `render?` | `ReactElement \| function` | - | Renders another element, such as an `aside`, with the panel's styles. |

Other props go to the native `div`.