Highlight

A shared Motion-powered highlight that slides between items on hover, or fades per-item on click. React component.

highlight.tsx

Loading code…

A shared pill highlight slides between nav items on hover — move slowly to see the spring.

Examples

Click Mode

highlight-click.tsx

Loading code…

A per-item fade background activated on click, useful for menus and sidebars.

Usage

Parent mode — shared sliding element

One motion.div lives inside the container and slides to whichever item is active. This is the same pattern used by the sidebar hover highlight.

import { Highlight, HighlightItem } from '@/components/sora-ui/effects/highlight';

const ITEMS = ['Design', 'Engineering', 'Product'];

export default function NavBar() {
  return (
    <Highlight
      mode="parent"
      trigger="hover"
      className="rounded-full bg-foreground/8"
      containerClassName="flex items-center"
    >
      {ITEMS.map((item) => (
        <HighlightItem key={item} value={item}>
          <button className="px-4 py-1.5 text-sm" type="button">
            {item}
          </button>
        </HighlightItem>
      ))}
    </Highlight>
  );
}

Children mode — per-item fade

Each item renders its own motion.div overlay. Framer Motion's layoutId animates between items on click.

import { Highlight, HighlightItem } from '@/components/sora-ui/effects/highlight';

export default function Menu() {
  return (
    <Highlight
      mode="children"
      trigger="click"
      defaultValue="inbox"
      className="rounded-md bg-foreground/8"
    >
      {['Inbox', 'Drafts', 'Sent'].map((label) => (
        <HighlightItem key={label} value={label}>
          <button className="w-full px-3 py-2 text-sm text-left" type="button">
            {label}
          </button>
        </HighlightItem>
      ))}
    </Highlight>
  );
}

Controlled value

const [active, setActive] = React.useState<string | null>('design');

<Highlight
  mode="parent"
  trigger="click"
  value={active}
  onValueChange={setActive}
  className="rounded-lg bg-accent"
>
  ...
</Highlight>

Props

Highlight

Prop	Type	Default
`mode?`	`"parent" \| "children"`	`"children"`
`trigger?`	`"hover" \| "click"`	`"click"`
`value?`	`string \| null`	-
`defaultValue?`	`string \| null`	-
`onValueChange?`	`(value: string \| null) => void`	-
`className?`	`string`	-
`style?`	`CSSProperties`	-
`transition?`	`Transition`	`{ type: "spring", stiffness: 350, damping: 35 }`
`exitDelay?`	`number`	`0`
`disabled?`	`boolean`	`false`
`containerClassName?`	`string`	-
`boundsOffset?`	`Partial<{ top: number; left: number; width: number; height: number }>`	-

HighlightItem

Prop	Type	Default
`value?`	`string`	-
`disabled?`	`boolean`	`false`
`activeClassName?`	`string`	-
`className?`	`string`	-
`style?`	`CSSProperties`	-
`transition?`	`Transition`	-
`asChild?`	`boolean`	`false`

Use mode="parent" for navigation bars, tab rows, and any horizontal/vertical list where you want one smooth background element sliding between items. The spring physics make the motion feel natural even when the cursor skips quickly across items.

Use mode="children" for menus, sidebars, and selection lists where each item independently fades in its background. The shared layoutId cross-fades between items on click.

Avoid using trigger="hover" with mode="children" and widely-spaced items — the per-item fade-in/out can feel noisy. In that case, prefer mode="parent" which slides a single element.

Accessibility

HighlightItem sets aria-selected and data-active on each item wrapper. The highlight overlay itself is decorative (pointer-events-none) and invisible to assistive technologies. Keyboard navigation is not wired automatically — connect it via the controlled value/onValueChange API if needed.

When prefers-reduced-motion: reduce is set, useReducedMotion() collapses the transition to duration: 0 — the highlight still moves to the active item's bounds, just instantly instead of animating.

highlight.tsx

Loading code…

A shared pill highlight slides between nav items on hover — move slowly to see the spring.

Examples

Click Mode

highlight-click.tsx

Loading code…

A per-item fade background activated on click, useful for menus and sidebars.

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/effects/highlight.tsx

Loading code…

Update the import paths to match your project setup.

File Structure

highlight.tsx

Usage

Parent mode — shared sliding element

One motion.div lives inside the container and slides to whichever item is active. This is the same pattern used by the sidebar hover highlight.

import { Highlight, HighlightItem } from '@/components/sora-ui/effects/highlight';

const ITEMS = ['Design', 'Engineering', 'Product'];

export default function NavBar() {
  return (
    <Highlight
      mode="parent"
      trigger="hover"
      className="rounded-full bg-foreground/8"
      containerClassName="flex items-center"
    >
      {ITEMS.map((item) => (
        <HighlightItem key={item} value={item}>
          <button className="px-4 py-1.5 text-sm" type="button">
            {item}
          </button>
        </HighlightItem>
      ))}
    </Highlight>
  );
}

Children mode — per-item fade

Each item renders its own motion.div overlay. Framer Motion's layoutId animates between items on click.

import { Highlight, HighlightItem } from '@/components/sora-ui/effects/highlight';

export default function Menu() {
  return (
    <Highlight
      mode="children"
      trigger="click"
      defaultValue="inbox"
      className="rounded-md bg-foreground/8"
    >
      {['Inbox', 'Drafts', 'Sent'].map((label) => (
        <HighlightItem key={label} value={label}>
          <button className="w-full px-3 py-2 text-sm text-left" type="button">
            {label}
          </button>
        </HighlightItem>
      ))}
    </Highlight>
  );
}

Controlled value

const [active, setActive] = React.useState<string | null>('design');

<Highlight
  mode="parent"
  trigger="click"
  value={active}
  onValueChange={setActive}
  className="rounded-lg bg-accent"
>
  ...
</Highlight>

Props

Highlight

Prop	Type	Default
`mode?`	`"parent" \| "children"`	`"children"`
`trigger?`	`"hover" \| "click"`	`"click"`
`value?`	`string \| null`	-
`defaultValue?`	`string \| null`	-
`onValueChange?`	`(value: string \| null) => void`	-
`className?`	`string`	-
`style?`	`CSSProperties`	-
`transition?`	`Transition`	`{ type: "spring", stiffness: 350, damping: 35 }`
`exitDelay?`	`number`	`0`
`disabled?`	`boolean`	`false`
`containerClassName?`	`string`	-
`boundsOffset?`	`Partial<{ top: number; left: number; width: number; height: number }>`	-

HighlightItem

Prop	Type	Default
`value?`	`string`	-
`disabled?`	`boolean`	`false`
`activeClassName?`	`string`	-
`className?`	`string`	-
`style?`	`CSSProperties`	-
`transition?`	`Transition`	-
`asChild?`	`boolean`	`false`

When to Use

Use mode="children" for menus, sidebars, and selection lists where each item independently fades in its background. The shared layoutId cross-fades between items on click.

Avoid using trigger="hover" with mode="children" and widely-spaced items — the per-item fade-in/out can feel noisy. In that case, prefer mode="parent" which slides a single element.

Highlight

Examples

Click Mode

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

Usage

Parent mode — shared sliding element

Children mode — per-item fade

Controlled value

Props

Highlight

HighlightItem

When to Use

Accessibility

On this page

Highlight

Examples

Click Mode

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

Usage

Parent mode — shared sliding element

Children mode — per-item fade

Controlled value

Props

Highlight

HighlightItem

When to Use

Accessibility

On this page