Element Highlighting

Element Highlighting is a powerful feature that allows you to draw attention to specific elements on your page during demos. This is particularly useful for:

Guiding users through complex interfaces
Highlighting important features
Creating interactive tutorials
Drawing attention to specific UI elements

Note

We are working on a chrome extension that will allow you to highlight elements on any website without having to add an id prop. Coming soon!

Basic Usage

Add an id attribute to any element you want to highlight in your demo:

components/Dashboard.tsx


<Card id="revenue-chart">
  <h1>Revenue Overview</h1>
  <BarChart data={revenueData} />
</Card>

Best Practices

Meaningful IDs: Use descriptive IDs that reflect the purpose of the element
Accessibility: Ensure highlighted elements remain accessible
Performance: Avoid highlighting too many elements simultaneously
Responsive Design: Test highlighting behavior across different screen sizes

💡

Tip

Use element highlighting in combination with tooltips for more effective guided tours.

Note

Element highlighting works with any HTML element or React component that accepts an id prop.