Scroll spy navnavigation

Sticky section anchor tabs that highlight the section in view, with a sliding indicator and a header offset variable.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/scroll-spy-nav

의존 아이템locale style

Default

Overview

Rooms

Policies

scroll-spy-nav-demo.tsx

import { ScrollSpyNav } from "@/components/ui/scroll-spy-nav";
const sections = [  { id: "overview", label: "Overview" },  { id: "rooms", label: "Rooms" },  { id: "policies", label: "Policies" },];
export default function ScrollSpyNavDemo() {  return (    <div>      <ScrollSpyNav items={sections} offset={56} />      {sections.map((section) => (        <section key={section.id} id={section.id} className="min-h-64 scroll-mt-28 py-6">          <h2 className="text-lg font-medium">{section.label}</h2>        </section>      ))}    </div>  );}