Fluix

Physics-based, cross-framework UI components. Beautiful by default.

Fluix delivers opinionated UI components that work identically across React, Vue, Svelte, Angular, and Vanilla JS. Powered by spring physics, SVG gooey morphing, and zero animation dependencies.

Official documentation: https://fluix.ivanlopezdev.es Source code: https://github.com/ivanlhz/fluix

Packages

Package	Description	Status
@fluix-ui/core	State machines, primitives, imperative APIs	✅ Available
@fluix-ui/css	Shared styles (data-attribute selectors)	✅ Available
@fluix-ui/react	React 18+ adapter	✅ Available
@fluix-ui/vue	Vue 3+ adapter	✅ Available
@fluix-ui/svelte	Svelte 5+ adapter	✅ Available
@fluix-ui/vanilla	Zero-framework adapter	✅ Available
@fluix-ui/angular	Angular 17+ adapter	✅ Available

Components

Component	Description	Status
Toast	Physics-based notifications with gooey SVG morphing	✅ Available
Notch	Adaptive floating dock / island component	✅ Available
Tooltip	Positioned floating content	📋 Planned
Dialog	Modal with focus trap	📋 Planned
Drawer	Draggable sheet with snap points	📋 Planned
Command	Command palette with fuzzy search	📋 Planned
Menu	Dropdown with keyboard navigation	✅ Available
Tabs	Accessible tabbed interface	📋 Planned

Quick Start

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

# Vue
npm install @fluix-ui/vue @fluix-ui/css

# Angular
npm install @fluix-ui/angular @fluix-ui/core @fluix-ui/css

# Vanilla JS
npm install @fluix-ui/vanilla @fluix-ui/css

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

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

Publish to npm

All packages use version and publishConfig.access: "public" in their package.json. pnpm replaces workspace:* peer deps with the published version when publishing.

# 1) Authenticate
npm login
npm whoami

# 2) Build and verify
pnpm build
pnpm typecheck
pnpm test
pnpm lint

# 3) Dry run (build + publish --dry-run for all packages)
pnpm run release:dry

# 4) Publish all packages (build + publish -r)
pnpm run release
# If your git tree is dirty on purpose:
# pnpm --filter "./packages/*" publish -r --no-git-checks

Architecture

@fluix-ui/core    → Pure TypeScript logic (state machines, spring physics)
@fluix-ui/css     → Framework-agnostic styles (data-attribute selectors)
@fluix-ui/react   → Thin React adapter (~60 lines per component)
@fluix-ui/vue     → Thin Vue adapter
@fluix-ui/svelte  → Thin Svelte adapter
@fluix-ui/vanilla → Thin Vanilla JS adapter
@fluix-ui/angular → Thin Angular 17+ adapter

See AGENTS.md for the full architectural guide.

Development

pnpm install
pnpm build
pnpm test

Open Source

• Contributing Guide
• Code of Conduct
• Security Policy

Inspirations

• Sileo — Original toast design and gooey SVG effect
• Zag.js — Cross-framework state machine architecture
• Sonner — Imperative toast API design

License

MIT