use-design-system/Highlight

What problem does it solve?

This Skill helps onboard new users or guide them through complex interfaces by visually highlighting specific UI elements and providing contextual information.

Core Features & Use Cases

• Onboarding Overlays: Create step-by-step tutorials that draw attention to key features.
• Contextual Tooltips: Display helpful messages or descriptions next to interactive elements.
• Focus Management: Temporarily dim the rest of the screen to focus user attention on a specific component.
• Use Case: When a user first visits a dashboard, use this Skill to highlight the "Create New Report" button and display a tooltip explaining its function.

Quick Start

Use the Highlight component to show a message when the 'open' prop is true, wrapping the target element in the children.