DetailLayout

Stripe DetailPage

Every record gets its own page in two panes. The 17.5rem summary pane on the left says who or what it is at a glance — SummaryHeader, a StatGroup, a collapsible Details section with ids and PropertyStack — and stays put on large screens. The working pane on the right holds PaneTabs over stacked Sections. On phones the panes stack, summary first.

pnpm add @zikzuk/ui

import { DetailLayout, SummaryHeader, PropertyStack, IdChip, CopyId } from "@zikzuk/ui";

An account

Branches 3

When to use

Opening any record from a list: a customer, an account, a provider.
Related records are List rows that open their own pages.
Edit a Section in place rather than re-running a whole setup.

Not for

A side sheet beside the list for a record's detail.
A third, nested pane.

Props

DetailLayout

Prop	Type	Description
summary	ReactNode	The left pane: SummaryHeader, StatGroup, Details.
children	ReactNode	The working pane: PaneTabs and Sections.
className	string	Extra classes on the outer element.

SummaryHeader

Prop	Type	Description
title	ReactNode	The record's name, 2xl bold.
badges	ReactNode	StatusPills beside the name.
subtitle	ReactNode	One line under it.
titleStyle	CSSProperties	e.g. morph(kind, id), so a list row's name morphs into the title.

PropertyStack

Prop	Type	Description
rows	{ label, value }[]	Grey label over value.
columns	1 \| 2 Default `1`	2 puts pairs side by side from sm.
className	string	Extra classes on the outer element.