Highlight

Loading code…

Examples

Click Mode

Loading code…

Installation

Loading code…

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 background

Each item renders its own motion.div overlay carrying one shared layoutId, so the background slides from the previous item to the new one as you move or click. Exactly one overlay is mounted at a time and it never fades, which keeps the colour identical the whole way across — crossfading two translucent layers never adds back up to a single layer.

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

HighlightItem

Composition

HighlightItem never takes over your markup. With asChild it merges into the child element while preserving what the child already owns:

• The child's ref is composed, not replaced — Radix or cmdk items keep measuring themselves.
• The child's own onClick / onMouseEnter / onMouseLeave still run, then the highlight activates.
• Data attributes the child already sets (aria-selected, data-active) win over the injected ones.

<Highlight mode="parent" trigger="hover" className="rounded-full bg-foreground/8">
  {ITEMS.map((item) => (
    <HighlightItem asChild key={item} value={item}>
      <Link className="px-3 py-1.5 text-sm" href={item.href}>
        {item.label}
      </Link>
    </HighlightItem>
  ))}
</Highlight>

Both components forward ref and accept native div props. On Highlight the forwarded ref points at the container element in mode="parent", and is null in mode="children" where no container is rendered.

Uncontrolled

defaultValue seeds the active item and the component owns it from then on.

<Highlight defaultValue="inbox" mode="children" trigger="click">
  ...
</Highlight>

Controlled

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

<Highlight value={active} onValueChange={setActive} mode="parent" trigger="hover">
  ...
</Highlight>

When to Use

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 slides its own background into place.

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.

aria-selected is only meaningful on an element that carries the matching role. If you build a listbox or tablist, pass role (and any other ARIA attributes) to HighlightItem; they land on the wrapper the attributes describe.

In mode="children" there is no container element, so native div props on Highlight (role, onKeyDown, id…) are not rendered anywhere. Use mode="parent", or enabled={false} to opt out of the highlight entirely. In development this logs a warning naming the ignored props.

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.