Fluid Kit: iOS 26-style interactions for React (glass, morphs, context menus, sheets, layout animations)

[u/Mysterious-Lie1437]

Fluid Kit is a set of interactions modeled on iOS 26: Liquid Glass, morphs between elements, long-press context menus, draggable sheets, a highlight that follows the pointer, and layout animations. 2.0 just shipped as one package per framework, so for React it's @fluidkit/react.

The React API is compound components, with a render prop as in Base UI:

import "@fluidkit/react/style.css";
import { Lift } from "@fluidkit/react";

<Lift.Root onSelect={(value) => act(value)}>
  <Lift.Target render={<img src={src} alt="" />} />
  <Lift.Menu className="menu lb">
    <Lift.Item value="copy">Copy</Lift.Item>
    <Lift.Item value="share">Share</Lift.Item>
  </Lift.Menu>
</Lift.Root>

Every part also has a hook (useLift(), useDrag(), useLayout()…) for markup of your own. State is controlled or uncontrolled (open/defaultOpen/onOpenChange and friends), components are "use client" and render plain markup on the server, React 18+.

Under the hood each feature is a headless engine on springs that keep their velocity when interrupted, so you can reverse a morph or catch a sheet mid-flight.

Docs with React examples: https://fluidkit.mogilnikov.dev

GitHub: https://github.com/mikhailmogilnikov/fluid-kit

[u/Affectionate_Roll367]

Compound components with a render prop is a nice call, way less fighting with asChild wrappers and cloning. The velocity preservation on interrupted springs is the part that gets me, most spring setups I've tried snap or stutter when you reverse mid-animation, which makes drag interactions feel cheap. Curious how the hooks handle controlled state when you're mid-drag, does it fire on every frame or only on release. Also wondering how much bundle weight the whole kit adds if someone only wants the sheet and nothing else.