react-driftkit
Small, focused building blocks for floating UI in React. Tree-shakable, unstyled, one component per job.
ZoomLens
A draggable magnifier circle that zooms into whatever it hovers. Great for design review, image inspection, or dense data tables. Drag to move, scroll to zoom, Escape or a hotkey to exit.
FlickDeck
A stack of cards where each back card peeks from one edge — receding into depth for top/bottom peek, fanning out at an angle for left/right. Click the peek to flick that card to the front, or optionally swipe the front card off to dismiss it. Useful for toggles between views, tip stacks, and side-by-side comparisons.
MovableLauncher
A draggable floating wrapper that lets users pick up any widget and drop it anywhere on the viewport — or snap it to the nearest corner on release.
SnapDock
An edge-pinned dock that slides along any side of the viewport and flips orientation automatically between horizontal and vertical layouts.
DraggableSheet
A pull-up / pull-down sheet pinned to an edge with snap points like peek, half, and full. Great for mobile-style details, filters, or cart drawers.
ResizableSplitPane
An N-pane split view with draggable handles and a single render prop for custom handle UI. Supports min/max constraints, persisted sizes, and both horizontal and vertical layouts.
npm install react-driftkitimport { SnapDock, ZoomLens } from 'react-driftkit';Tree-shakable
Each component is independently exported. Import only what you use and the rest is dropped from your bundle.
Unstyled
Zero opinions about how your UI looks. Style with CSS, Tailwind, CSS Modules, or any design system. Data attributes drive layout state.
Zero dependencies
No runtime dependencies. Small footprint. React 18 and React 19 supported out of the box.
Pointer-first
Mouse, touch, and pen input all work the same way. Each gesture is locked to its pointer, with fast drags and cancellation handled.
What is react-driftkit?
react-driftkit is a small, tree-shakable React library of floating UI primitives — draggable launchers, edge-pinned docks, pull-up sheets, resizable split panes, and a draggable zoom lens. It ships unstyled so it works with Tailwind, CSS Modules, or any design system, and has zero runtime dependencies.
Does react-driftkit support React 19?
Yes. react-driftkit declares peer dependencies of react@^18 || ^19 and react-dom@^18 || ^19, so it works with React 18 and React 19 without changes.
What components does react-driftkit include?
Six components: MovableLauncher (draggable corner widget with snap-to-corners), SnapDock (edge-pinned dock that flips orientation), DraggableSheet (pull-up/pull-down sheet with peek/half/full snap points), ResizableSplitPane (N-pane split layout with draggable handles and localStorage persistence), ZoomLens (draggable magnifier circle, or target-scoped product-image zoom), and FlickDeck (peek-and-flick card stack).
How do I install react-driftkit?
Install with npm install react-driftkit, yarn add react-driftkit, or pnpm add react-driftkit. It has zero runtime dependencies and tree-shakes — only the components you import are bundled.
Is react-driftkit styled?
No. react-driftkit ships unstyled primitives — you bring your own CSS, Tailwind, CSS Modules, or design system. Each component exposes data attributes (like data-edge, data-orientation, data-dragging) so you can drive styles from CSS without re-rendering.
Does react-driftkit work on touch devices?
Yes. All components use Pointer Events and lock each gesture to the initiating pointer, so mouse, touch, and pen input all work without extra wiring. Fast drags, pointer cancellation, and lost capture are handled.
Enjoying react-driftkit?
Star the repo on GitHub to help more devs discover it.