Panels

Boxed content panel with optional title — default, outlined, or filled. Use for neutral structural grouping that needs a frame but not the semantic weight of a callout.

<Panels> wraps content in a bordered box. Use it when you want a reader’s eye to pause on a block — a prerequisites list, a sample configuration, a reference snippet — without implying “urgent” or “cautious” the way a callout does.

Three visual variants

Default

Prerequisites

Bun 1.1+ (the only supported runtime)
A Publier token (free at publier.dev/login)

import { Panels } from '@publier/shell/components';

<Panels title="Prerequisites">
- Bun 1.1+ (the only supported runtime)
- A Publier token (free at publier.dev/login)
</Panels>

Outlined

Key concept

Publier is zero-config. Everything on this page works without touching astro.config.ts — the integration auto-wires MDX, resumable islands, prefetch, math, and the remark/rehype pipeline.

<Panels variant="outlined" title="Key concept">
Publier is zero-config. Everything on this page works without
touching `astro.config.ts` — the integration auto-wires MDX,
resumable islands, prefetch, math, and the remark/rehype pipeline.
</Panels>

Filled

A filled panel has a tinted background. Good for sidebars, quote blocks, or when you want stronger visual separation but still no semantic urgency.

<Panels variant="filled">
A filled panel has a tinted background. Good for sidebars, quote
blocks, or when you want stronger visual separation but still no
semantic urgency.
</Panels>

Without a title

Panels work without titles too — the body slot is the only required content. Useful when the surrounding section heading already provides context.

<Panels variant="outlined">
Panels work without titles too — the body slot is the only required
content.
</Panels>

Props

Prop	Type	Default	Description
`title`	`string`	—	Optional heading rendered inside the box.
`variant`	`'default' \| 'outlined' \| 'filled'`	`'default'`	Visual treatment.
`class`	`string`	—	Extra CSS class.

Body content passes through as children.

When to use Panels vs Callouts

Situation	Use
”Watch out — this is destructive”	Callouts (Danger)
“Here’s a recommended path”	Callouts (Tip)
“Extra context sidebar”	Panels (default)
“Highlighted example block”	Panels (filled)
“Reference definition or key concept”	Panels (outlined)

Behaviour

CSS-only — no JavaScript.
All borders and backgrounds pull from theme tokens (--color-base-*, --color-primary) and adapt to every theme.

Semantic callouts → Callouts.
Bordered content grids → Card & CardGrid.