Introduction

Fluix is a cross-framework UI component library with physics-based animations and opinionated visual design. Components work identically across React, Vue, Svelte, Angular, and Vanilla JS.

Why Fluix?

• Physics-first animation - Spring physics and SVG gooey morphing with zero animation dependencies.
• True cross-framework - Logic lives in a shared core. Framework adapters are thin bridges.
• Beautiful by default - Opinionated design using OKLCH colors, smooth spring transitions, and gooey SVG effects.
• Imperative API - Call fluix.success() from anywhere. No providers, no context setup.

Quick Start

npm install @fluix-ui/react @fluix-ui/css

import { Toaster, fluix } from "@fluix-ui/react";
import "@fluix-ui/css";

function App() {
  return (
    <>
      <Toaster position="top-right" />
      <button onClick={() => fluix.success({ title: "Saved!" })}>
        Save
      </button>
    </>
  );
}

That’s it. The Toaster component renders the toast viewport, and fluix.success() fires a toast from anywhere in your app.

Components

Component	Status
Toast	Available
Notch	Available
Menu	Available
Dialog	Planned
Tooltip	Planned
Drawer	Planned
Tabs	Planned

Next Steps

• Installation - Framework-specific setup guides
• Toast Overview - Everything about the Toast component
• Notch Overview - Floating island / pill interaction component
• Menu Overview - Animated navigation menu with gooey indicator
• Playground - Try it live