Flashify — Simple & Modern Notification System

Flashify is a lightweight and framework-agnostic notification library.
It lets you show clean and animated alerts (success, error, warning, info, custom) in any web app — React, Angular, Svelte, Vue, or plain JavaScript.

• Live demo: https://flashify-react.vercel.app

---

Features

• Works with any framework (core + simple wrappers)
• Planned support for React, Vue, Svelte, and Angular bindings
• Success, Error, Warning, Info, Default, Custom notifications
• Smooth animations with a modern soft "pill" indicator design
• Fully themeable using CSS variables or Tailwind
• Small bundle size and no external dependencies

---

Install

Core package (for any JS app)

npm install @ajmal_n/flashify-core

Copy install command

Using pnpm:

pnpm add @ajmal_n/flashify-core

React wrapper

npm install @ajmal_n/flashify-react

Copy install command

Using pnpm:

pnpm add @ajmal_n/flashify-react

---

Basic Usage (React)

import { FlashifyProvider, useFlashify } from "@ajmal_n/flashify-react";
--index.tsx (or main.tsx)
ReactDOM.createRoot(document.getElementById("root")!).render(
  <FlashifyProvider>
    <App />
  </FlashifyProvider>
);

function App() {
  const flash = useFlashify();

  return (
    <div>
      <button onClick={() => flash.success("Profile updated!")}>
        Show success
      </button>
    </div>
  );
}

Wrap your app:

<FlashifyProvider>
  <App />
</FlashifyProvider>

---

Core Usage (Vanilla JavaScript)

import { flashify } from "@ajmal_n/flashify-core";

flashify.success("Saved successfully!");
flashify.error("Something went wrong");
flashify("Simple message");

You can pass options:

flashify.show({
  message: "Custom alert",
  type: "custom",
  durationMs: 6000,
});

---

Styling & Theming

Flashify uses CSS variables, so you can change colors and metrics instantly:

:root {
  /* Indicator background colors */
  --flashify-success-bg: #ecfdf5;
  --flashify-success-border: #10b981;
  --flashify-success-text: #065f46;

  /* Shared Border Radius */
  --flashify-radius: 12px;
}

Works perfectly with Tailwind themes too.

---

📂 Monorepo Structure

flashify/
  packages/
    core/     - Notification engine (vanilla JS)
    react/    - React wrapper
    vue/      - Vue bindings (upcoming)
    svelte/   - Svelte bindings (upcoming)
    angular/  - Angular bindings (upcoming)

---

🛠️ Available Notification Types

• success
• error
• warning
• info
• default
• custom

---

🔧 API Overview

flashify(message, options?)
flashify.success(message, options?)
flashify.error(message, options?)
flashify.warning(message, options?)
flashify.info(message, options?)
flashify.custom(message, options?)

flashify.show(options)
flashify.dismiss(id)
flashify.clear()

---

Contributing

Pull requests are welcome!
You can add wrappers for other frameworks or improve animations/themes.

---

License

MIT License
Free for commercial and personal projects.