Introduction

Fluix is a cross-framework UI component library with physics-based animations and opinionated visual design. Components work identically across React, Vue, Svelte, 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
Dialog	Planned
Tooltip	Planned
Drawer	Planned
Menu	Planned
Tabs	Planned

Next Steps

• Installation — Framework-specific setup guides
• Toast Overview — Everything about the Toast component
• Playground — Try it live