RightPanel

<RightPanel> is the persistent right-side panel on entity detail pages — Attio-style. Optional tab strip at the top; properties / activity / comments inside. Width is one of two presets: 320px (narrow, default) or 400px (wide).

import from "@na/ui/components/RightPanel" ▶ Open in Storybook packages/ui/src/components/RightPanel.tsx

When to use

Detail pages where properties + activity + comments coexist with a primary body.
Anywhere “context column” is the right mental model — always-visible, not opened on demand.

Don’t use RightPanel for: edge drawers that come and go (Sheet), form-side hints (SplitContent), or split-pane layouts where both sides are equally weighted (TwoColumnLayout).

With tabs

Detail body…

<RightPanel
  tabs={[
    { id: 'props', label: 'Properties', content: <PropertyList … /> },
    { id: 'activity', label: 'Activity', badge: <Badge>12</Badge>, content: <Timeline … /> },
  ]}
/>

API

Prop	Type	Default	Description
`width`	`"narrow" \| "wide"`	`"narrow"`	narrow=320px (default), wide=400px.
`tabs`	`RightPanelTab[]`	—	{ id?, label, content, badge? }[]. When omitted, children render directly.
`defaultTab`	`string`	—	Default active tab id.
`activeTab`	`string`	—	Controlled active tab id.
`onActiveTabChange`	`(tabId: string) => void`	—	Fires on tab change.
`headerActions`	`ReactNode`	—	Top-right header actions (e.g. overflow menu).
`children`	`ReactNode`	—	Tabless content. Ignored when tabs is set.

Design guidelines

✓ Do

Default tab = the one users open 80% of the time. Properties is usually correct.
Use width="wide" only when long property values force it — Attio defaults to narrow.
Pair with HoverCardPreview on entity-name cells in lists, so users can decide whether to open the detail.

✗ Don't

Use RightPanel on list pages. Right-aligned context columns belong on detail pages.
Stack two RightPanels. Use tabs to multiplex one panel.

Accessibility

When tabs is set, composes Tabs under the hood — ARIA tablist / tab / tabpanel.
Tabless mode is a plain <aside> — landmark navigation.

PropertyList — Common content inside a Properties tab.
Timeline — Common content inside an Activity tab.
Sheet — Drawer flavor (open/close).

▶ Open RightPanel stories in Storybook