flowico

flowico

🚀 flowico is a lightweight Node.js/JavaScript toolkit for building smooth UI flows, interactive transitions, and UX-friendly navigation patterns. Designed with simplicity in mind, Flowico helps developers craft clean, fluid user journeys with minimal setup.

✨ Features

• ⚡ Lightweight & Fast – no heavy dependencies.
• 🔄 Flow-based Navigation – define user flows declaratively.
• 🎨 Customizable Transitions – smooth animations between states.
• 🧩 Composable API – plug into React, Vue, or vanilla JS apps.
• 🛠️ Framework-agnostic – works with any frontend stack.

📦 Installation

npm install flowico
# or
yarn add flowico

🚀 Quick Start

import { createFlow, nextStep, prevStep } from "flowico";

// Define a simple flow
const checkoutFlow = createFlow([
  "cart",
  "shipping",
  "payment",
  "confirmation"
]);

console.log(checkoutFlow.current()); // "cart"

checkoutFlow.next(); 
console.log(checkoutFlow.current()); // "shipping"

checkoutFlow.jump("payment"); 
console.log(checkoutFlow.current()); // "payment"

🎨 Example (React Integration)

import { useFlow } from "flowico/react";

function Checkout() {
  const { step, next, prev } = useFlow([
    "cart",
    "shipping",
    "payment",
    "confirmation"
  ]);

  return (
    <div>
      <h1>Step: {step}</h1>
      <button onClick={prev}>Back</button>
      <button onClick={next}>Next</button>
    </div>
  );
}

📖 API

createFlow(steps: string[])

Creates a new flow manager with the given steps.

• .current() → returns the current step.
• .next() → moves to the next step.
• .prev() → moves to the previous step.
• .jump(step: string) → jumps directly to a step.
• .reset() → resets back to the first step.

useFlow(steps: string[])

React hook for managing flows inside components.

🛣 Roadmap

• Add Vue integration
• Add Svelte integration
• Support nested flows
• Built-in transition animations

🤝 Contributing

Contributions are welcome! Please open issues and PRs to make Flowico even better.

📜 License

MIT © 2025 Flowico