Panel

import {
  Panel,
  PanelBody,
  PanelFooter,
  PanelHeaderRoot,
  PanelScrollContent,
  PanelScrollViewport,
  PanelSection,
} from "raft-ui";

<Panel edge="inset">
  {/* Use PanelHeaderRoot directly for a fully custom fixed header. */}
  <PanelHeaderRoot />

  <PanelBody>
    <PanelScrollViewport>
      <PanelScrollContent>
        <PanelSection />
      </PanelScrollContent>
    </PanelScrollViewport>
  </PanelBody>

  {/* Optional bottom action boundary. */}
  <PanelFooter />
</Panel>

import {
  PanelAction,
  PanelActions,
  PanelHeader,
  PanelHeaderContent,
  PanelHeaderIcon,
  PanelHeading,
  PanelMeta,
  PanelSectionHeader,
  PanelStatus,
  PanelTitle,
} from "raft-ui";

<PanelHeader>
  <PanelHeaderIcon />
  <PanelHeaderContent>
    <PanelHeading>
      <PanelTitle />
      <PanelStatus />
    </PanelHeading>
    <PanelMeta />
  </PanelHeaderContent>
  <PanelActions>
    <PanelAction aria-label="Panel action">...</PanelAction>
  </PanelActions>
</PanelHeader>

{/* Use as an alternative fixed header for a section-level view. */}
<PanelSectionHeader />