react-driftkit
A small, tree-shakable React component library for floating UI: draggable widgets, an edge-pinned dock, a draggable bottom sheet, an N-pane resizable split pane, an image magnifier (zoom lens), and a peek-and-flick card stack. Unstyled, TypeScript-first, zero dependencies, React 18 & React 19.
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';What you can build with react-driftkit
Each component maps to a recurring UI pattern in modern React apps. Use one, compose several, or pull in just the primitive you need — every export tree-shakes independently.
React draggable widget / chat launcher
Pin a chat bubble, AI assistant, support widget, or debug panel to a viewport corner with snap-on-release.
React bottom sheet & pull-up drawer
Mobile-style filters, cart drawers, and detail panels with peek / half / full snap points and velocity-aware release.
React resizable split pane (N-pane layouts)
IDE-style split layouts with draggable handles, min/max constraints, and localStorage-persisted ratios — horizontal or vertical.
React image magnifier / product zoom lens
Drop-in magnifier circle for product images, design review, dense data tables, or map inspection. Wheel to zoom, Escape to dismiss.
React floating dock / toolbar
Edge-pinned dock that slides along any side and flips orientation between horizontal and vertical layouts automatically.
React card stack / swipeable cards
Peek-and-flick stack for tip cards, side-by-side comparisons, view toggles, or onboarding flows. Optional swipe-to-dismiss.
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.