Skip to content

Getting Started

Anchors is a utility library for position anchoring. It helps you create floating element interactions like tooltips, popovers, and dropdowns, using the time-tested position solver of Floating UI.

Why

Anchoring a floating element’s onto another element means the floating element’s position should be relative to the position of that other UI element. On the web, implementing this is…challenging.

Anchors deals with the tricky bits for you, giving you useful positioning utilities built on Floating UI that handle scrolling, overflow, positioning, layout, and much more.

Install

Use on the web with vanilla JavaScript

npm install @folz/anchors
# or
yarn add @folz/anchors
# or
pnpm add @folz/anchors
npm install @folz/anchors
# or
yarn add @folz/anchors
# or
pnpm add @folz/anchors

React

Use with React

npm install @folz/anchors-react
# or
yarn add @folz/anchors-react
# or
pnpm add @folz/anchors-react
npm install @folz/anchors-react
# or
yarn add @folz/anchors-react
# or
pnpm add @folz/anchors-react

CDN

Anchors can be loaded via CDN using ESM or UMD format.

ESM

import {computePosition} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.4.5/+esm';
import {computePosition} from 'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.4.5/+esm';

UMD

<script src="https://cdn.jsdelivr.net/npm/@floating-ui/core@1.3.1"></script>
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.4.5"></script>
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/core@1.3.1"></script>
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.4.5"></script>

All exports will be available on window.AnchorsDOMwindow.AnchorsDOM.

Migration from Floating UI or Popper.js

If you are coming to Anchors from Floating UI or Popper.js, there is a migration guide available here.

Next
Tutorial