15.11Component
Overlay anatomy.
Cross-cutting rules every floating surface obeys. If you reach for a new overlay, this section is the spec.
Universal rules
Radiusrounded-2xl on every overlay container. No mixed radii on a single popover stack.
Shadowshadow-modal only. Never grow a shadow on hover. Never add a secondary shadow.
Ring1px hairline-strong at 40% opacity. Soft, not surgical.
BackdropNo backdrop-blur as wallpaper. Reserved for the auth /login live-activity moment.
MotionFade + zoom-95 on enter. Ease-out 200ms. No bounce, no elastic, no slide-from-bottom.
FocusTrap to content. Escape closes. Return focus to trigger on close.
Z-indexUse Radix Portal. Never set z-index by hand.
TriggersButtons or interactive elements only. Never an icon-only div.
What gets a Popover vs a Dialog vs a Sheet
- Popover
- Small contextual UI anchored to a trigger. Filter window, color picker, date range, inline form for a single field.
- Dialog
- Multi-field commit, attention-required. Editing a record, confirming a destructive action with detail.
- AlertDialog
- Destructive + irreversible. Delete, reset, sign out everywhere.
- Sheet
- Side-anchored, long content, related-but-secondary surfaces. Drawer for filters, inspector for a record.
- Tooltip
- One-line clarifier. Never holds an action, never holds content longer than 8 words.
That's the operating layer.
If a primitive isn't on these pages, it isn't shipped. If a pattern isn't documented here, it's an anti-pattern until proven otherwise.