@jsburbano-dev/payflux

A modern and customizable component library built with Vue 3 and Tailwind CSS, designed for building financial dashboards and modern web apps with ease.

📦 Features

• ⚡️ Vue 3 Composition API support
• 🎨 Tailwind CSS 4.x ready
• 🌗 Dark mode support
• 📱 Fully responsive components
• 🧪 Storybook integration with Vitest
• 📊 Finance-focused UI elements
• 🚀 Easy to integrate and extend

🧩 Available Components

• GridIconCard
• IconCard
• Card
• HeaderTop
• KpiCard
• BalanceStats
• StatusPill
• CreditScoreIndicator
• MoneyInput
• InfoItemsList
• DonutChart

🚀 Installation

npm install @jsburbano-dev/payflux
# or
yarn add @jsburbano-dev/payflux

🔧 Usage

// main.ts
import { createApp } from "vue";
import App from "./App.vue";

import "@jsburbano-dev/payflux/dist/style.css";
import {
  GridIconCard,
  IconCard,
  Card,
  HeaderTop,
  KpiCard,
  BalanceStats,
  StatusPill,
  CreditScoreIndicator,
  MoneyInput,
  InfoItemsList,
  DonutChart,
} from "@jsburbano-dev/payflux";

const app = createApp(App);

app.component("GridIconCard", GridIconCard);
app.component("IconCard", IconCard);
app.component("Card", Card);
app.component("HeaderTop", HeaderTop);
app.component("KpiCard", KpiCard);
app.component("BalanceStats", BalanceStats);
app.component("StatusPill", StatusPill);
app.component("CreditScoreIndicator", CreditScoreIndicator);
app.component("MoneyInput", MoneyInput);
app.component("InfoItemsList", InfoItemsList);
app.component("DonutChart", DonutChart);

app.mount("#app");

📚 Storybook

yarn storybook

🧪 Test

yarn test

📦 Build for Production

yarn build

📝 License

MIT — Built with ❤️ by @jsburbano-dev