> For AI agents: the complete documentation index is available at https://ooui-react.pages.dev/en/llms.txt, the full documentation bundle is available at https://ooui-react.pages.dev/en/llms-full.txt.

# PanelLayout

> [Source](https://github.com/BearBin1215/ooui-react/tree/main/src/layouts/PanelLayout) | [Original component](https://doc.wikimedia.org/oojs-ui/master/js/OO.ui.PanelLayout.html "OO.ui.PanelLayout")

A panel: a content container with a set of presentation switches (padding, scrolling, expansion, border), also the base of layout components such as [StackLayout](https://ooui-react.pages.dev/en/components/stack-layout/index.md).

## Basic usage

```tsx preview
import { PanelLayout } from "ooui-react";

function App() {
  return (
    <div style={{ position: "relative", height: 120 }}>
      <PanelLayout padded scrollable framed>
        <p>A padded, framed panel; a scrollbar appears when content overflows.</p>
        <p>Second paragraph.</p>
        <p>Third paragraph.</p>
        <p>Fourth paragraph.</p>
        <p>Fifth paragraph.</p>
      </PanelLayout>
    </div>
  );
}

export default App;
```

In the `expanded` form (on by default) the panel fills its parent via absolute positioning, so the parent must be positioned and sized — the outer `div` above (its `position: relative` and `height`) exists for exactly that; with an unpositioned or unsized parent, the panel expands against a further positioned ancestor (or the viewport) and looks like it "vanished". `expanded={false}` is the static form, shrinking to fit the content:

```tsx preview
import { PanelLayout } from "ooui-react";

function App() {
  return (
    <PanelLayout padded framed expanded={false}>
      Static form: does not fill the parent, shrinks to fit the content, no positioned or sized container needed.
    </PanelLayout>
  );
}

export default App;
```

Layouts built on this component, such as [StackLayout](https://ooui-react.pages.dev/en/components/stack-layout/index.md), inherit the same premise.

## API

| Prop         | Description                                                                                                    | Type                             | Default |
| ------------ | -------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- |
| `padded`     | Whether to leave padding                                                                                       | `boolean`                        | `false` |
| `scrollable` | Whether scrollable                                                                                             | `boolean`                        | `false` |
| `expanded`   | Whether to fill the parent element                                                                             | `boolean`                        | `true`  |
| `framed`     | Whether framed                                                                                                 | `boolean`                        | `false` |
| `hidden`     | Whether hidden (three-state semantics in [Layout](https://ooui-react.pages.dev/en/components/layout/index.md)) | `boolean \| 'until-found'`       | —       |
| `...rest`    | Native `div` props (`className`, `id`, `data-*`, etc.) passed straight to the root                             | `HTMLAttributes<HTMLDivElement>` | —       |

## See also

- The `hidden` three-state semantics of the base class: [Layout](https://ooui-react.pages.dev/en/components/layout/index.md)
- The paged container built on it: [StackLayout](https://ooui-react.pages.dev/en/components/stack-layout/index.md)