Components

Component primitives handle the tricky parts of UI development—positioning, accessibility, keyboard navigation—so you can focus on design and business logic. This collection focuses on headless and low-level libraries that give you control.

---

Positioning & Overlays

The hardest part of building tooltips, dropdowns, and popovers is getting them to stay in the right place. These libraries solve the math.

Floating UI

Floating UI is the successor to Popper.js, rebuilt from scratch with a modular architecture.

import { computePosition, flip, shift, offset } from '@floating-ui/dom';

computePosition(referenceEl, floatingEl, {
  placement: 'top',
  middleware: [offset(8), flip(), shift()],
}).then(({ x, y }) => {
  Object.assign(floatingEl.style, {
    left: `${x}px`,
    top: `${y}px`,
  });
});

Package	Size	Use Case
@floating-ui/dom	3kb	Vanilla JS
@floating-ui/react	5kb	React with hooks
@floating-ui/vue	4kb	Vue 3 composition API

Features:

• Middleware system — Compose behaviors like flip, shift, arrow, size
• Virtual elements — Position relative to cursor, selection, or arbitrary coordinates
• Platform adapters — Works in DOM, React Native, Canvas

---

Legacy: Popper.js

Popper.js — The original positioning library. Still widely used, but Floating UI is the recommended path forward.

Migration: Floating UI provides a migration guide for Popper.js users.

---

What’s Missing

This section is intentionally minimal. For complete component systems, see:

• Design Systems — Full component libraries with design tokens
• Figma to Code — Libraries that ship both React components and Figma kits

---

Recommendations by Use Case

Need	Solution
Just positioning	Floating UI
Headless components	Radix, Headless UI, React Aria
Full design system	Chakra, Mantine, shadcn/ui
Native mobile	React Native Paper, Tamagui