# antuikit / Anchor

> Anchor with a minimap variant: a rail of dashes that shows reading progress and opens into the full list.

Docs: https://antuikit.com/docs/components/anchor

## Install

npx antuikit@latest init
npx antuikit@latest add anchor

## Import

import { Anchor } from "@/components/ui/anchor";

## Demos

- [Basic](https://ui.antuikit.com/embed/anchor/basic.md): Pass `items`, each with an `href` pointing at a section's `id`, to build a rail that highlights the section in view.
- [Minimap](https://ui.antuikit.com/embed/anchor/minimap.md): Set `variant="minimap"` to show the sections as a narrow rail of dashes that opens into the full list on hover.
- [Minimap placement](https://ui.antuikit.com/embed/anchor/minimap-placement.md): Set `placement="left"` when the rail sits on the right of the content, so the list opens toward the text.
- [Minimap expanded](https://ui.antuikit.com/embed/anchor/minimap-expanded.md): Set `expanded` to keep the minimap's list open beside the content, with the reading progress still drawn next to each title.
- [Minimap width](https://ui.antuikit.com/embed/anchor/minimap-width.md): Set `panelWidth` to fix the width of the minimap's list, kept open here with `expanded`, so long titles end in an ellipsis.
- [Horizontal](https://ui.antuikit.com/embed/anchor/horizontal.md): Set `direction="horizontal"` to lay the links out in a row above the content, like tabs that follow the scroll.
- [Nested items](https://ui.antuikit.com/embed/anchor/nested.md): Give an item `children` to nest links under it, like chapters listed under the part they belong to.
- [Scroll container](https://ui.antuikit.com/embed/anchor/container.md): Set `getContainer` to the scrolling element when the sections scroll inside a panel instead of the page.
- [Target offset](https://ui.antuikit.com/embed/anchor/target-offset.md): Set `targetOffset` to the height of a sticky header so a clicked section lands below it and is highlighted on time.
- [Replace history](https://ui.antuikit.com/embed/anchor/replace.md): Set `replace` so each click replaces the current history entry, and Back leaves the page instead of stepping through sections.
- [Custom highlight](https://ui.antuikit.com/embed/anchor/custom-highlight.md): Pass `getCurrentAnchor` to choose which link is highlighted, like the part a chapter belongs to instead of the chapter.
- [On change](https://ui.antuikit.com/embed/anchor/on-change.md): Pass `onChange` to hear when the section in view changes, by scroll or by click, like showing the current chapter in a header.
- [Custom click](https://ui.antuikit.com/embed/anchor/custom-click.md): Pass `onClick` to run code when a link is clicked, and call `preventDefault()` to keep the URL while the panel still scrolls.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/anchor`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Anchor` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.