Layout

PreviewPanel

Bounded preview layout shell with title, status, optional chrome regions, and nested overflow discipline.

import { PreviewPanel } from '@lostgradient/cinder/preview-panel';
layoutpreviewpanel
01

Overview

Layout shell for bounded previews with consistent header, status, optional tabs, body, and footer regions.

Usage

svelte 
<script lang="ts">
  import PreviewPanel from '@lostgradient/cinder/preview-panel';
</script>

<PreviewPanel title="Artifact preview" status="ready">
  <p>Preview content</p>
</PreviewPanel>

Props

PreviewPanel supports title, status, leading, actions, tabs, children, footer, and class.

Accessibility

The panel is layout-only for non-error states. status="error" promotes the panel to role="alert" so the error preview state is announced assertively.

Live preview

Artifact preview

ready

Preview content is ready.

Updated just now
02

When to use

Use when
  • Framing a generated preview, artifact inspection area, or side-by-side review surface.
  • A preview needs consistent header, tabs, body, and footer slots without owning product-specific behavior.
Avoid when
  • Communicating an urgent standalone message — use alert.
  • You only need generic spacing — use stack.
03

Examples

Preview panel

A bounded preview with status and footer content.

04

Props

Props for preview-panel
NameTypeDefaultDescription
title required text Visible panel title.
status 'idle''loading''ready''warning''error''empty' 'idle' Status taxonomy for the preview surface.
leading Snippet | undefined Leading visual or control rendered before the title.
actions Snippet | undefined Action controls rendered in the header.
tabs Snippet | undefined Tab controls rendered below the header.
children required snippet Main preview content.
footer Snippet | undefined Footer content such as metadata or secondary controls.