

<Preview name="BasicMotionHighlightExample" />

## Overview [#overview]

`MotionHighlight` provides an animated highlight that follows the active item. It can be used for tab-like controls, segmented controls, or hover-driven navigation.

## Examples [#examples]

### Hover Driven [#hover-driven]

<Preview name="HoverMotionHighlightExample" />

## Usage [#usage]

```tsx
import { MotionHighlight } from "@tilt-legal/cubitt-components/primitives";

<MotionHighlight defaultValue="overview">
  <button data-value="overview">Overview</button>
  <button data-value="activity">Activity</button>
</MotionHighlight>
```
