Render react node inside portal at fixed position


Affix renders div element with fixed position inside Portal component. Use component to display elements fixed at any position on screen, e.g. scroll to top button:

Affix is located at the bottom of the screen, scroll to see it
import { ArrowUpIcon } from '@modulz/radix-icons';
import { useWindowScroll } from '@mantine/hooks';
import { Affix, Button, Text, Transition } from '@mantine/core';
function Demo() {
const [scroll, scrollTo] = useWindowScroll();
return (
<Text align="center">Affix is located at the bottom of the screen, scroll to see it</Text>
<Affix position={{ bottom: 20, right: 20 }}>
<Transition transition="slide-up" mounted={scroll.y > 0}>
{(transitionStyles) => (
leftIcon={<ArrowUpIcon />}
onClick={() => scrollTo({ y: 0 })}
Scroll to top


Import component props type:

import type { AffixProps } from '@mantine/core';

AffixProps extends React.ComponentPropsWithoutRef<'div'>, all other props are available under Component props tab.

Build fully functional accessible web applications faster than ever
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback