Overlay components
Everything that floats above the page: dialogs and confirmations, side sheets and swipeable drawers, popovers, hover cards, tooltips, dropdown and context menus, a menubar and a ⌘K command palette.
Focus moves in when they open and returns when they close, they stay on screen down to 320 pixels wide, and dialogs turn into swipeable bottom sheets on phones.
- Alert dialogA confirmation dialog for destructive or important actions that waits for async work, and becomes a bottom sheet on phones.
- CommandA searchable list of actions, inline or as a ⌘K palette, with pages, shortcuts and highlighted matches.
- Context menuA menu of actions on right click or long press, with submenus, checkbox and radio items, and hold feedback on touch.
- DialogA window over the page for forms and focused tasks, with a pinned header and footer, nesting, and a swipeable bottom sheet on phones.
- DrawerA panel that slides in from any edge and follows your finger, with snap points, a working handle and nested drawers that stack.
- Dropdown menuA menu of actions and options behind a button, with groups, submenus, checkbox and radio items, and shortcuts.
- Hover cardA preview card that opens when a link is hovered or focused, for content sighted users can glance at.
- MenubarA desktop-style bar of menus with one highlight that slides between open menus and instant switching as you sweep across.
- PopoverA floating panel anchored to a trigger that resizes smoothly with its content and follows the trigger’s direction.
- SheetA panel that slides in from any edge, with swipe-to-dismiss, scroll lock and stacked nesting.
- TooltipA short hint on hover or keyboard focus that opens after a brief rest, switches instantly between neighbours and shows shortcuts.
Built into Pro blocks
Blocks for AI products that are built from these components.
- API keysThe API keys page of an AI product. Handles a secret shown only once, revoke with undo and rotation with a grace period.
- BillingThe plan and usage page of an AI product. Handles credits running out mid-cycle, plan changes with proration and card errors.
- NotificationsThe Notifications section of an AI product’s settings. Handles a channel by event grid, quiet hours and browser permission for push.
- SecurityThe Security section of an AI product’s settings. Handles sessions, two-factor with recovery codes and deletion behind a typed confirmation.
- SettingsThe settings page of an AI product. Handles a save bar that appears only when something changed, field errors and loading states.
- TeamThe team page of an AI product’s workspace settings. Handles seats running out, pending invites and ownership transfer with a typed confirmation.