Panel

A semantic surface for settings, summaries and grouped content. Control its tone, treatment and inner layout without losing the theme.

Panel

View source · API reference

Panel renders a section around a separate body container. Put spacing on the body when its children need breathing room.

A release summary

Combine a quiet surface with a clear heading, status and a real destination.

Release workspace

Ready

Your content, components and theme are ready for review.

Explore the library 
<Panel tone="neutral" variant="surface" bodyClass="p-4">
  <Flex align="center" justify="between" wrap="true">
    <h3 class="m-0">Release workspace</h3>
    <Badge tone="success">Ready</Badge>
  </Flex>
  <p>Your content, components and theme are ready for review.</p>
  <BtnLink href="/components/" tone="accent">Explore the library</BtnLink>
</Panel>

Surface hierarchy

Use a stronger tone for important context and a quiet nested surface for supporting details.

Primary context

A surface connects related content.

Nested details stay readable.

Supporting context

An outline separates content without a second filled surface.

<Grid columns="1" columnsSm="2">
  <Panel tone="accent" variant="surface" bodyClass="p-4">
    <h3>Primary context</h3>
    <p>A surface connects related content.</p>
    <Panel tone="neutral" variant="outline" bodyClass="p-3">
      Nested details stay readable.
    </Panel>
  </Panel>
  <Panel tone="neutral" variant="outline" bodyClass="p-4">
    <h3>Supporting context</h3>
    <p>An outline separates content without a second filled surface.</p>
  </Panel>
</Grid>

The link provides navigation and keyboard semantics. The panel provides the visual response.

Build a feature card

Explore richer card composition.

 
<a href="/components/landing/feature-card/" class="d-block">
  <Panel tone="accent" variant="outlineFill" variantMode="stateful" bodyClass="p-4">
    <strong>Build a feature card</strong>
    <p class="mb-0">Explore richer card composition.</p>
  </Panel>
</a>

Behavior and accessibility

Panel does not add an action or an accessible label. Give content sections a heading; use a real link or button for interactions. Its default overflow is hidden: add the existing overflow-visible utility when a popup inside the panel needs to escape.

API reference

Panel contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

tone

RefOrValue<SemanticTone>
Default
inherited

Semantic intent: neutral, accent, secondary, info, success, warning, danger, feature, custom or ghost. The active skin supplies the colors.

variant

RefOrValue<ComponentVariant>
Default
surface

Visual treatment. Accepts solid, surface, surfaceAlt, spotlight, glass, flat, flatAlt, flatSolid, outlineFill, outline, subtle, subtleBtn, link, sheen, underline, rail, bracket or none.

variantMode

RefOrValue<ComponentVariantMode>
Default
stateless

Use stateless for content surfaces; stateful enables the treatment’s hover, focus and active styles. It does not add interaction handlers.

bodyClass

RefOrValue<string>
Default
not set

Classes applied to the inner panel body. Use spacing utilities such as p-4 or layout utilities without changing the outer surface.

Composition

Default slot: arbitrary flow content inside the body. Register definePanelComponents; composed content registers its own component families.