Slide Highlight

A cursor-following pill that glides between items, plus an active marker that slides on selection — the sidebar's moving highlight, made reusable.

Customize

Active marker

Hover pill

Usage

import { useState } from "react";
import { SlideHighlight } from "@/components/lazy-ui/slide-highlight";

const items = ["Overview", "Analytics", "Reports", "Settings"];

export function Demo() {
  const [active, setActive] = useState(items[0]);
  return (
    <SlideHighlight
      className="relative isolate flex w-56 flex-col gap-1 p-1.5"
      activeSelector="[data-slide-active]"
      activeKey={active}
    >
      {items.map((label) => (
        <button
          key={label}
          type="button"
          data-slide-item
          data-slide-active={active === label ? "" : undefined}
          onClick={() => setActive(label)}
          className="relative rounded-lg px-3.5 py-2 text-left text-sm"
        >
          {label}
        </button>
      ))}
    </SlideHighlight>
  );
}