Monthly revenue
Focus Mode Overlay
Spotlight overlay for onboarding and feature callouts. Dismiss via Escape, the Close button, or backdrop click (when background interaction is disabled).
Default
Default focus mode overlay
Test Workspace
SaaS Dashboard
This example shows how FocusModeOverlay can be used for onboarding, product tours, feature callouts, and client walkthroughs.
Active users
2,847
Users active in the last 30 days.
Conversion rate
7.4%
Trial users converting to paid.
Team members
Manage access for staff, admins, and collaborators.
Ava Thompson
Product team member
Miles Carter
Product team member
Sophie Brooks
Product team member
Sign in to view this example's source code.
Sign inInteraction
Interaction focus mode overlay
Test Workspace
Workspace settings
This example keeps the page interactive while FocusModeOverlay is open. The highlighted field can still be clicked, focused, and edited.
General settings
Manage how this workspace appears across the app.
Preview URL
https://test-workspace.com/test-workspace
Sign in to view this example's source code.
Sign inProps
| Name | Type | Default | Description |
|---|---|---|---|
| target | string | undefined | The target to display the focus mode overlay for |
| open | boolean | false | Whether the focus mode overlay is open |
| defaultOpen | boolean | true | Whether the focus mode overlay is open by default |
| onOpenChange | function | undefined | Callback when the focus mode overlay is opened or closed |
| title | string | undefined | The title of the focus mode overlay |
| description | string | undefined | The description of the focus mode overlay |
| children | ReactNode | undefined | The content of the focus mode overlay |
| placement | string | auto | The placement of the focus mode overlay |
| padding | number | 10 | The padding of the focus mode overlay |
| radius | number | 24 | The radius of the focus mode overlay |
| backdropOpacity | number | 0.72 | The backdrop opacity of the focus mode overlay |
| zIndex | number | 9999 | The z-index of the focus mode overlay |
| scrollIntoView | boolean | true | Whether to scroll the target into view |
| lockScroll | boolean | false | Whether to lock the scroll |
| showPulse | boolean | true | Whether to show the pulse |
| className | string | undefined | The class name of the focus mode overlay |
| spotlightClassName | string | undefined | The class name of the spotlight |
| cardClassName | string | undefined | The class name of the card |