Animated background indicator that follows the active item in navigation and tab lists.

Highlight

An animated background indicator that follows the currently active element in a group, commonly used for navigation tabs, pill selectors, and menu items.

Import

import { Highlight, HighlightItem } from '@mks2508/mks-ui/react';

Basic Usage

.tsx

<Highlight className="rounded-md bg-white/10">
<HighlightItem value="tab1">
  <button className="px-4 py-2">Tab 1</button>
</HighlightItem>
<HighlightItem value="tab2">
  <button className="px-4 py-2">Tab 2</button>
</HighlightItem>
<HighlightItem value="tab3">
  <button className="px-4 py-2">Tab 3</button>
</HighlightItem>
</Highlight>

How It Works

The Highlight component:

Wraps items with HighlightItem
Automatically tracks which item is active
Animates a background indicator smoothly between items
Uses spring-based motion for natural transitions

Controlled Mode

Use value and onValueChange for controlled state:

const [activeTab, setActiveTab] = useState('tab1');

<Highlight
  value={activeTab}
  onValueChange={setActiveTab}
  className="rounded-md bg-white/10"
>
  <HighlightItem value="tab1">
    <button className="px-4 py-2">Tab 1</button>
  </HighlightItem>
  <HighlightItem value="tab2">
    <button className="px-4 py-2">Tab 2</button>
  </HighlightItem>
</Highlight>

Integration with Tabs

Highlight is used internally by the Tabs component:

<Tabs defaultValue="general">
  <TabsList>
    <TabsHighlight className="rounded-md bg-white/10">
      <TabsHighlightItem value="general">
        <TabsTab value="general">General</TabsTab>
      </TabsHighlightItem>
      <TabsHighlightItem value="advanced">
        <TabsTab value="advanced">Advanced</TabsTab>
      </TabsHighlightItem>
    </TabsHighlight>
  </TabsList>
</Tabs>

API Reference

Highlight

Prop	Type	Default	Description
`value`	`string`	—	Controlled active value
`defaultValue`	`string`	—	Default active value (uncontrolled)
`onValueChange`	`(value: string) => void`	—	Change callback
`controlledItems`	`boolean`	`false`	Use controlled item registration
`click`	`boolean`	`true`	Enable click-to-select
`className`	`string`	—	Custom styles for the highlight indicator
`transition`	`Transition`	—	Motion transition config

HighlightItem

Prop	Type	Default	Description
`value`	`string`	—	Unique value for this item
`className`	`string`	—	Item container classes
`children`	`ReactNode`	—	Item content

Highlight

On this page