Overlay
Components that float above the page — modals, dropdowns, tooltips, toasts, and popovers. Built on native browser primitives (the Popover API, <dialog>, CSS anchor positioning), not wrapped third-party libraries.
16 overlay components
- ActionSheet — Bottom-rising sheet of discrete actions (iOS action-sheet pattern) with a Cancel button
- AlertDialog — Confirmation dialog requiring explicit user action; no light-dismiss
- BottomSheet — Mobile bottom sheet with drag-to-resize detents, velocity-projected snapping, and drag-to-dismiss
- CommandMenu — Cmd+K command palette with fuzzy search over grouped commands
- ContextMenu — Right-click context menu anchored at pointer coordinates via CSS custom properties
- Drawer — Edge-anchored dialog panel that slides in from a screen edge with CSS-only enter/exit motion
- Dropdown — Menu of actions revealed from a trigger
- HoverCard — Hover-triggered popover with configurable open/close delay
- Menu — Dropdown menu with keyboard navigation, built on usePopover
- Modal — Accessible dialog overlay using native <dialog> element
- OverflowMenu — Kebab icon button revealing a menu of row-level actions
- Popover — Anchored floating panel built on CSS Anchor Positioning + Popover API
- Sheet — Slide-in panel from any edge, using popover=manual and @starting-style animations
- Toast — Transient notification surfaced via the useToast hook
- Toggletip — A click-triggered info popover for supplementary, selectable content
- Tooltip — Contextual label shown on hover or focus