## Import
```jsx
import { Panel } from "@cfa/react-core";
```
## Guidelines
### When to use
- Panel is a persistent side column beside the main content. It is part of the page layout, not an overlay.
### Do
- Hold one coherent purpose in the side column.
### Avoid
- Using Panel for temporary or task-scoped content that overlays the page. Use Drawer.
- Using Panel for a blocking decision. Use Modal.
- Using Panel for content in the main content area. Use Card or the main layout column.
## Examples
### Full Page
The standard Panel layout uses full-page positioning and should be used for application-level layouts. The docs site cannot render this version as a live example because the panel is positioned relative to the full viewport instead of the preview frame. Refer to Storybook for a working interactive example.
```jsx
ApplicationDashboardProjectsSettingsJohn Doe
Main Content
The panel can be toggled with the trigger button or the default Cmd+B / Ctrl+B keyboard
shortcut.
```
### Controlled
Use `open` and `onOpenChange` when the parent component needs to own the panel's open state.
```jsx
function ControlledPanelExample() {
const [open, setOpen] = React.useState(true);
return (
Controlled Panel
Panel is {open ? "open" : "closed"}.
);
}
```
### Common Options
Use `side="right"` to position the panel on the right side. Use `defaultOpen={false}` for an uncontrolled panel that starts closed. The default keyboard shortcut is Cmd+B on Mac and Ctrl+B on Windows or Linux; set `keyboardShortcut` to customize the key or `disableKeyboardShortcut` to turn the shortcut off.
```jsx
{/* Panel.Root and Panel.Inset */}
```
### Contained Layout
The default `viewport` layout is preferred for application shells. Use `layout="contained"` for bounded regions such as dashboard panels, split panes, or documentation previews.
`Panel.Inset` renders a `main` landmark by default because most Panel usage represents an application shell. When a contained Panel is rendered inside an existing page, use `as="section"` or `as="div"` to keep the inset layout behavior without creating another page-level `main` landmark.
```jsx