Detail Bubble
Open Source
NewKeyboard-complete drafting detail trigger with a real magnified viewport and title-block header.
API and behavior
Compound exports, owned slots, interaction law, and family hook routing.
- Required props
detailtriggerLabelanchorLabelscalechildren- Optional props
sheetdefaultOpen- Controlled props
openonOpenChange- Companion exports
DetailBubble- Owned data-slot contract
detail-bubbledetail-bubble-triggerdetail-bubble-glyphdetail-bubble-referencedetail-bubble-contentdetail-bubble-headerdetail-bubble-scaledetail-bubble-viewport
Motif route
MOTIF_REGISTRY.detail-bubble → apparatusTarget('detail-bubble')
Keyboard
Tab to the trigger; Enter or Space opens; Escape closes and restores focus.
Accessibility
The trigger has an explicit label; the magnified viewport names anchor and magnification; glyphs are silent.
Family hooks
Draft consumes outline, popover-ground, viewport, scale, and opacity-only motion hooks.
closed triggeropen magnified viewportlong viewport contentInstallation
npx shadcn@latest add @substrateui/detail-bubble --yesUpgrading a project that installed base before F1? Refresh the shared hooks first:
npx shadcn@latest add @substrateui/base --yes --overwriteDependencies
npm Dependencies
npm install class-variance-authorityTags
draftdetailzoompopover