SidePanel

Persistent right-side inspector for rich per-section content (forms, charts, key-value fields, annotation streams). Header aligned to page header height (h-14), with a stack of titled sections — static or collapsible. For flat icon+label navigation lists, use Sidebar instead.

Static sections (filter + columns)

DensityTip: hover the (i) icons next to section titles to see tooltips.

<SidePanel>
  <SidePanelHeader>
    <SidePanelTitle>Sample 10 of 3.86k</SidePanelTitle>
    <SidePanelHeaderActions>
      <IconButton variant="outline" size="sm" aria-label="Previous">
        <ChevronLeft />
      </IconButton>
      <IconButton variant="outline" size="sm" aria-label="Next">
        <ChevronRight />
      </IconButton>
    </SidePanelHeaderActions>
  </SidePanelHeader>
  <SidePanelBody>
    <SidePanelSection>
      <SidePanelSectionHeader>
        <Input size="sm" placeholder="Search columns" iconLeading={<Search />} />
        <SidePanelSectionActions>
          <IconButton variant="ghost" size="sm" aria-label="Filter">
            <Filter />
          </IconButton>
        </SidePanelSectionActions>
      </SidePanelSectionHeader>
      <SidePanelSectionContent>
        {columns.map(...)}
        <SidePanelSubsectionLabel>Hidden</SidePanelSubsectionLabel>
        {hiddenColumns.map(...)}
      </SidePanelSectionContent>
    </SidePanelSection>
  </SidePanelBody>
</SidePanel>

Collapsible sections (annotations + scoring)

DensityTip: hover the (i) icons next to section titles to see tooltips.

<SidePanel>
  <SidePanelHeader>
    <SidePanelTitle>Sample 10 of 3.86k</SidePanelTitle>
  </SidePanelHeader>
  <SidePanelBody>
    <SidePanelSection>
      <SidePanelSectionHeader>
        <SidePanelSectionTitle info="The reviewer's overall rating">User rating</SidePanelSectionTitle>
        <SidePanelSectionActions>
          {[1, 2, 3, 4, 5].map((n) => <Button key={n} size="sm" variant={n === 1 ? "primary" : "outline"}>{n}</Button>)}
        </SidePanelSectionActions>
      </SidePanelSectionHeader>
    </SidePanelSection>

    <SidePanelSection collapsible defaultOpen>
      <SidePanelSectionHeader>
        <SidePanelSectionTitle info="Reviewer notes">Annotations</SidePanelSectionTitle>
      </SidePanelSectionHeader>
      <SidePanelSectionContent>...</SidePanelSectionContent>
    </SidePanelSection>

    <SidePanelSection collapsible>
      <SidePanelSectionHeader>
        <SidePanelSectionTitle info="Detected issues">Issues</SidePanelSectionTitle>
      </SidePanelSectionHeader>
      <SidePanelSectionContent>...</SidePanelSectionContent>
    </SidePanelSection>
  </SidePanelBody>
</SidePanel>