# antuikit / Affix

> Affix. Adds nothing beyond `className` merging through `cn()`.

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

## Install

npx antuikit@latest init
npx antuikit@latest add affix

## Import

import { Affix } from "@/components/ui/affix";

## Demos

- [Basic](https://ui.antuikit.com/embed/affix/basic.md): Wrap an element in `Affix` to pin it once its scroll container passes it, and set `offsetTop` to leave a gap above it.
- [Pin to the bottom](https://ui.antuikit.com/embed/affix/offset-bottom.md): Set `offsetBottom` to hold the Accept button at the bottom edge of the terms, and use `onChange` to enable it once the reader scrolls to the end.
- [Both offsets](https://ui.antuikit.com/embed/affix/offset-priority.md): Set `offsetTop` and `offsetBottom` together and the child pins to the bottom edge before you reach it and to the top edge once you scroll past it.
- [Scrolling container](https://ui.antuikit.com/embed/affix/container.md): Pass `target` a function that returns the scrolling element when the Affix sits in a panel, drawer or modal instead of the page.
- [Pinned state](https://ui.antuikit.com/embed/affix/on-change.md): `onChange` receives `true` when the child pins and `false` when it returns, here to make the Share button solid only while it is pinned.
- [Child that changes size](https://ui.antuikit.com/embed/affix/update-position.md): Call `updatePosition()` on the ref after the pinned child changes size, so the space it holds in the page grows or shrinks with it.

## 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/affix`, 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-*)`.
- `Affix` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.