layout · Normal DOM + Twenty Remote DOM

PanelHeader

Top-of-section row — title on the left, action buttons on the right.

Use at the top of any in-panel section. Composed for Twenty front-component contexts: pure inline-styles, no Radix, works inside the CRM right panel without the bridge filtering it out.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { PanelHeader } from '@8maverik8/twenty-design';

Examples

Title + dual action

Subscriptions & Services
tsx
<PanelHeader
  title="Subscriptions & Services"
  actions={
    <>
      <Button size="sm">+ Catalog item</Button>
      <Button size="sm" variant="secondary">+ Custom item</Button>
    </>
  }
/>

With description

Discount policy
Applied to the line subtotal before tax.
tsx
<PanelHeader
  title="Discount policy"
  description="Applied to the line subtotal before tax."
/>

Guidelines

✓
Pair the title with at most two primary actions on the right.More than two actions belong in a dropdown — the panel is narrow.
✕
Use it as the top-level panel chrome that owns the tab strip.Tabs are Twenty CRM&apos;s concern, not ours. PanelHeader sits inside one tab&apos;s content.