saturation/uisaturation/ui
DocsComponentsBlocksPagesEmails
GitHub

Sections

IntroductionComponentsInstallationMCPThemingDesignComposing a Detail Panel

Components

Components

General

AvatarBadgeButtonKbdProgressSeparatorSkeletonSpin ResolveSpinnerSplit ButtonSync ButtonTypography

Forms & Inputs

Address LookupCalendar PickerCheckboxColor PickerComboboxDate PickerEmoji PickerFavicon SearchFieldInputInput GroupInput OTPRadio GroupSelectSliderSwitchTextareaToggleToggle Group

Data Display

AccordionAlertCardChartComparison SliderCredit CardData TableEmptyItemMarkdownSaturation Credit CardStatus BadgeTableTree

Detail Panels

Detail FieldDetail HeroDetail Toolbar

Navigation

BreadcrumbCommandMenubarNavigation MenuPaginationTabs

Overlays

CollapsibleContext MenuDialogDropdown MenuHover CardSheet

Layout

Button GroupFont ProviderWizard Split Layout

Feedback

Sonner

Animation & Effects

Animated GroupAnimated ListAnimated NumberBeamBlur FadeBorder TrailGlow EffectLiquid MetalLoading StateParallaxPixelProgressive BlurRippleSpotlightText EffectText Shimmer

Productivity

Agent ChatAI Chat InputCoding AgentFiltersFull CalendarKanbanNovel Editor

Detail Panel

The assembled entity detail sidebar — toolbar, matched-set hero, sections of def-driven fields, and a footer action. A pure composition of the Detail* components; see /docs/detail-panels for the concepts.

Transaction
C
Cinelease
$4,250.00

Description
Camera package — week 3
Status
Contact
Cinelease, Inc.
Date
Jun 20, 2026
Amount
$4,250.00

Features

  • Five concepts, one block — Hero size, section, field def, action, and editor injection — assembled the way the compose-a-panel recipe teaches.
  • Def-driven fields — Each field is a FieldDef: kind + state decide the editor, affordances (copy, lock, provenance) apply automatically.
  • Slot-based hero — The background is a slot, so shader dependencies stay in your app; the block ships with a CSS-gradient stub.

API Reference

PropTypeDefaultDescription
toolbarTitle / title / valuestring-Toolbar rest title (entity type), hero title (entity name), and the count-up hero value.
backgroundReactNode-Hero background SLOT (shader/image) — defaults to a gradient stub.
avatarReactNode-Hero avatar node.
sectionsDetailPanelSection[]-Sections of def-driven fields ({ value, icon, label, count?, fields: { id, def }[] }).
record / onFieldChangeRecord<string, FieldValue>-Initial field values; edits are kept in internal state and reported per field.
editorsDetailFieldEditors-Injected editors for the data-coupled kinds (date/ref/tags/unit).
action / onClose…-Footer DetailActionButton and the toolbar close.