antuikit's Affix is Ant Design's Affix, installed into your project as a file you own. It adds a typed ref and nothing else: Affix positions its child and paints nothing, so there is nothing to theme.
Install
npx antuikit@latest init
npx antuikit@latest add affix
The first command installs AntuikitProvider and the theme tokens. The second adds this component.
Import
From @/components/ui/affix, never from antd. The file is yours once it is installed, so the import path is a path in your project rather than a package.
import { Affix } from "@/components/ui/affix"
The axes
There are none. Affix has no variant prop, so there is no variant to pick and no Figma property to match.
Two numbers and a function configure it: how far from an edge (offsetTop, offsetBottom) and which element scrolls (target). The same component covers a pinned header, a bottom action bar and a toolbar inside a drawer.
Flags
No boolean props. offsetTop defaults to 0 only when neither offset is set, so passing offsetBottom alone pins to the bottom instead of the top.
Whether the child is pinned is computed on scroll and reported through onChange. You cannot set it with a prop.
Slots
children is the only one, and it is required. It is what gets measured, pinned and copied into the placeholder's size, so give Affix one element with its own size, not a bare string or several siblings.
children: the element to pin. It must not be position: absolute, because an absolute child has no size to record.
You can still position Affix. style and className go on the outer div, the one that stays in the page, not on the pinned one.
Events
onChange: called with true when the child pins and false when it returns.
Styling
Affix has no classNames prop. className and style go on the outer div. Style the pinned element through the child you pass.
API Reference
Affix
Affix's props. Rows marked antuikit in the Version column are added by the kit.