ProductFeaturesDocs
Built InUI ComponentsAdmin ConsoleDatabaseBackendStorageAIRAGAuthSecurity
CompanyStoryAboutPricingBlogRoadmap
Install FLIN

Affix

Pins content to a fixed position when scrolling past it. Useful for sticky navigation, toolbars, or side panels.

Sticky Toolbar

Editor toolbar that stays pinned at the top while the user scrolls through content.

The toolbar above stays fixed at the top as you scroll through the content. This is useful for text editors, spreadsheets, or any interface with a toolbar.

Affix wraps any content and pins it to a fixed position once the user scrolls past the specified offset distance.

The offset prop controls how far from the top the element should stick.

Sticky Side Panel

Side navigation that stays visible while main content scrolls.

Main content scrolls freely while the side panel stays fixed.

Common in docs, dashboards, and settings.

Side navigation remains visible as the user scrolls.

On this page
Overview
Installation
Usage
API

Sticky Alert Banner

Warning banner that stays pinned while the user continues working.

The warning banner above stays pinned while the user continues editing.

Combine Affix with Alert, Notification, or any other component to create persistent UI indicators.

Usage

<Affix offset="0"> <div class="toolbar"> <Button variant="ghost"><Icon name="bold" size="14" /></Button> <Button variant="ghost"><Icon name="italic" size="14" /></Button> </div></Affix><Affix offset="80"> <nav>On this page</nav></Affix>

Props

PropTypeDefaultDescription
offsettext"0"Distance from top in pixels when fixed
childrencontent-Content to pin on scroll