Highlight

A highlight effect that allows you to highlight elements on hover, click or with a controlled value.

Open in

Tab 1

Tab 2

Tab 3

mode

exitDelay

hover

Usage

Uncontrolled Items

By default, child items will have the highlight effect. This will map the children elements and surround them with the HighlightItem element.

<Highlight>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Highlight>

Controlled Items

Using the controlledItems props, you place your HighlightItem wherever you like in the Highlight component.

<Highlight controlledItems>
  <HighlightItem>Item 1</HighlightItem>
  <div>
    <HighlightItem>Item 2</HighlightItem>
  </div>
  <HighlightItem>Item 3</HighlightItem>
</Highlight>

By default, in mode with the value children the highlight is placed in the HighlightItem component using Motion's layoutId technique. This technique should be preferred in most cases. However, in some cases, you may run into z-index problems, so it's best to use the parent mode to avoid visual bugs.

<Highlight>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Highlight>

Parent Mode

By using the mode property with the value parent, the Highlight component will set the highlight to absolute in Highlight. This may be useful in some cases to avoid the visual z-index bugs you can get with mode children.

<Highlight mode="parent">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Highlight>

HighlightItem asChild

Children Mode

// With asChild
<Highlight>
  <HighlightItem asChild>
    <div id="item-1">Item 1</div>
  </HighlightItem>
  <HighlightItem asChild>
    <div id="item-2">Item 2</div>
  </HighlightItem>
</Highlight>
// Result
<div className="relative" id="item-1">
  <div /> {/* Highlight */}
  <div className="relative z-[1]">Item 1</div>
</div>
<div className="relative" id="item-2">
  <div /> {/* Highlight */}
  <div className="relative z-[1]">Item 2</div>
</div>

// Without asChild
<Highlight>
  <HighlightItem>
    <div id="item-1">Item 1</div>
  </HighlightItem>
  <HighlightItem>
    <div id="item-2">Item 2</div>
  </HighlightItem>
</Highlight>
// Result
<div className="relative" >
  <div /> {/* Highlight */}
  <div className="relative z-[1]" id="item-1">Item 1</div>
</div>
<div className="relative" >
  <div /> {/* Highlight */}
  <div className="relative z-[1]" id="item-2">Item 2</div>
</div>

Parent Mode

// With asChild
<Highlight mode="parent">
  <HighlightItem asChild>
    <div id="item-1">Item 1</div>
  </HighlightItem>
  <HighlightItem asChild>
    <div id="item-2">Item 2</div>
  </HighlightItem>
</Highlight>
// Result
<div className="relative">
  <div /> {/* Highlight */}
  <div id="item-1">Item 1</div>
  <div id="item-2">Item 2</div>
</div>

// Without asChild
<Highlight mode="parent">
  <HighlightItem>
    <div id="item-1">Item 1</div>
  </HighlightItem>
  <HighlightItem>
    <div id="item-2">Item 2</div>
  </HighlightItem>
</Highlight>
// Result
<div className="relative">
  <div /> {/* Highlight */}
  <div>
    <div id="item-1">Item 1</div>
  </div>
  <div>
    <div id="item-2">Item 2</div>
  </div>
</div>

API Reference

Highlight

Prop	Type	Default
`as?`	`React.ElementType`	`div`
`mode?`	`'children' \| 'parent'`	`children`
`value?`	`string \| null`	-
`defaultValue?`	`string \| null`	-
`onValueChange?`	`(value: string \| null) => void`	-
`className?`	`string`	-
`style?`	`React.CSSProperties`	-
`transition?`	`Transition`	`{ type: 'spring', stiffness: 350, damping: 35 }`
`hover?`	`boolean`	`false`
`click?`	`boolean`	`true`
`disabled?`	`boolean`	`false`
`enabled?`	`boolean`	`true`
`exitDelay?`	`number`	`0.2`
`controlledItems?`	`boolean`	-
`itemsClassName?`	`string`	-

Mode: "parent"

Prop	Type	Default
`boundsOffset?`	`Partial<Bounds>`	-
`containerClassName?`	`string`	-
`forceUpdateBounds?`	`boolean`	-

HighlightItem

Prop	Type	Default
`as?`	`React.ElementType`	`div`
`children`	`React.ReactElement`	-
`id?`	`string`	-
`value?`	`string`	-
`className?`	`string`	-
`style?`	`React.CSSProperties`	-
`transition?`	`Transition`	-
`activeClassName?`	`string`	-
`disabled?`	`boolean`	`false`
`exitDelay?`	`number`	-
`asChild?`	`boolean`	`false`
`forceUpdateBounds?`	`boolean`	-

Highlight

Installation

Usage

Uncontrolled Items

Controlled Items

Children Mode

Parent Mode

HighlightItem asChild

Children Mode

Parent Mode

API Reference

Highlight

Mode: "parent"

HighlightItem

On this page