Sidebar Detail Panel

v0.4.0

Master-detail right-side sheet with badges, metrics, assignee, and tabbed sections. Opens via a built-in trigger or a custom one passed in `trigger`.

View as Markdown

Install

npx shadcn@latest add @signalos/sidebar-detail-panel

Requires a configured @signalos registry and a valid SIGNALOS_REGISTRY_TOKEN - get access. Registry dependencies (@signalos/tokens, @signalos/utils, @signalos/button, @signalos/sheet, @signalos/tabs, @signalos/skeleton) are pulled automatically.

Preview

Example & code

sidebar-detail-panel.example.tsx

// Example: opening the panel via its built-in trigger, no parent-owned state.
import { DetailPanel } from "./DetailPanel"

export default function Example() {
  return (
    <DetailPanel
      title="Revenue anomaly detected in EU checkout funnel"
      description="Created 2 hours ago · Slot #a1b2"
      metrics={[
        {
          id: "confidence",
          label: "Confidence",
          value: "82%",
          tone: "primary",
        },
        { id: "cagg", label: "CAgg", value: "0.842", mono: true },
      ]}
      assignee={{
        role: "Analyst",
        name: "Jane Doe",
        email: "jane@example.com",
      }}
      sections={[
        { id: "signals", label: "Signals", content: <p>Signal details.</p> },
        {
          id: "timeline",
          label: "Timeline",
          content: <p>Timeline details.</p>,
        },
      ]}
    />
  )
}

Props

DetailPanelMetric

Prop	Type	Default
id*	`string`	-
label*	`ReactNode`	-
value*	`ReactNode`	-
tone	`"default" \| "error" \| "primary" \| undefined`	-
mono	`boolean \| undefined`	-

DetailPanelSection

Prop	Type	Default
id*	`string`	-
label*	`ReactNode`	-
icon	`ReactNode`	-
content*	`ReactNode`	-

DetailPanelAssignee

Prop	Type	Default
name	`ReactNode`	-
email	`ReactNode`	-
role	`ReactNode`	-
icon	`ReactNode`	-

DetailPanelProps

Prop	Type	Default
open	`boolean \| undefined`	-
onOpenChange	`((open: boolean) => void) \| undefined`	-
trigger	`ReactNode`	-
badges	`readonly ReactNode[] \| undefined`	-
title*	`ReactNode`	-
description	`ReactNode`	-
progress	`ReactNode`	-
metrics	`readonly DetailPanelMetric[] \| undefined`	-
assignee	`DetailPanelAssignee \| undefined`	-
assigneeEmptyLabel	`ReactNode`	-
sections	`readonly DetailPanelSection[] \| undefined`	-
defaultSectionId	`string \| undefined`	-
errorMessage	`ReactNode`	-
children	`ReactNode`	-
widthClassName	`string \| undefined`	-
className	`string \| undefined`	-
data-testid	`string \| undefined`	-

npm dependencies

lucide-react@^1.7.0class-variance-authority@^0.7.1

Changelog

sidebar-detail-panel

0.4.0

A controlled panel (one given open) no longer renders the built-in "Details" trigger button. It drives its own visibility, so the default trigger was a stray, unwanted button on the page — consumers were commenting the SheetTrigger out downstream to get rid of it. Uncontrolled panels are unchanged, and an explicitly-passed trigger still renders in both modes.

0.3.1

Content sync fix to bring source in line with published registry payload.

0.3.0

Fixed tabbed sections: wired up Tabs/TabsList/TabsTrigger/TabsContent from @signalos/tabs, previously commented out and undefined.

0.2.0

open/onOpenChange are now optional — the panel manages its own visibility when omitted.
Added trigger prop: pass any element to open the panel; defaults to a built-in icon button.

0.1.1

Prior release.