Highlight · Animate UI

import { Highlight } from '@animate-ui/react/primitives/effects/highlight';

export function Segmented() {
  return (
    <Highlight defaultValue="overview" className="rounded-full bg-accent">
      <button data-value="overview">Overview</button>
      <button data-value="activity">Activity</button>
      <button data-value="settings">Settings</button>
    </Highlight>
  );
}

<Highlight controlledItems hover className="rounded-md bg-accent">
  <nav>
    <HighlightItem value="docs">
      <a href="/docs">Docs</a>
    </HighlightItem>
    <HighlightItem value="blog">
      <a href="/blog">Blog</a>
    </HighlightItem>
  </nav>
</Highlight>