finx-ui

v1.0.2

Published

2 months ago

Vue 3 Fintech UI Component Library

0High
0Medium
0Low

davidpriyadi

vue vue3 component library ui fintech tailwind components

FinX UI

Modern Vue 3 Fintech Component Library

A production-ready, lightweight component library built with Vue 3 and Tailwind CSS, specifically designed for building beautiful fintech applications.

📚 Storybook Documentation • 🚀 Quick Start • 💬 Support

🎯 About FinX UI

FinX UI is a comprehensive Vue 3 component library designed specifically for fintech applications. With 35+ production-ready components, extensive theming support, and full accessibility compliance, FinX UI helps you build professional financial interfaces faster.

Key Highlights:

🎨 8 Pre-configured Themes - Instant theme switching with persistent storage
⚡ Production Ready - Battle-tested components used in real fintech applications
📦 Zero Configuration - Works out of the box with sensible defaults
♿ Accessible First - WCAG compliant with full keyboard navigation
🌳 Tree Shakeable - ESM + UMD builds for optimal bundle size
📱 Mobile Optimized - 7 specialized mobile-first components (FXM prefix)

📚 Component Documentation

🎭 Interactive Storybook

The best way to explore FinX UI components is through our interactive Storybook documentation. Storybook provides:

✨ Live Component Playground - Test components with different props and states
📖 Complete API Reference - Detailed documentation for props, events, and slots
🎨 Visual Examples - See all variants, sizes, and states at a glance
💻 Code Snippets - Copy-paste ready code examples
♿ Accessibility Testing - Built-in accessibility checks

Run Storybook locally:

# Clone and install
git clone https://github.com/davidpriyadi/finx-ui.git
cd finx-ui
npm install

# Start Storybook
npm run storybook
# Opens at http://localhost:6006

📖 Read the Storybook Guide →

📦 Component Categories

Form Components

FxButton, FxInput, FxCheckbox, FxRadioGroup, FxSelect, FxCombobox
FxSwitch, FxDatePicker, FxRangeCalendar, FxSlider

Display Components

FxCard, FxBadge, FxAlert, FxAvatar, FxProgress, FxEmpty

Data Components

FxTable, FxDataTable (with search, sort, pagination), FxAccordion

Navigation Components

FxBreadcrumb, FxSidebar, FxTabs

Feedback Components

FxAlertDialog, FxToast, FxToastProvider, FxSonner, FxSpinner, FxTooltip

Mobile Components (FXM)

FxmBottomNav, FxmAppBar, FxmFloatingActionButton, FxmBottomSheet, FxmTabs

Utility Components

FxScrollArea, FxButtonGroup, FxLabel

📖 View Full Component Documentation →

📦 Installation

NPM

npm install finx-ui

Yarn

yarn add finx-ui

PNPM

pnpm add finx-ui

Peer Dependencies

FinX UI requires the following peer dependencies:

npm install vue@^3.3.0 lucide-vue-next@^0.263.0 radix-vue@^1.0.0

📖 Complete Setup Guide →

🚀 Quick Start

1. Install and Setup

# Install FinX UI and dependencies
npm install finx-ui vue@^3.3.0 lucide-vue-next@^0.263.0 radix-vue@^1.0.0

# Install Tailwind CSS (if not already installed)
npm install -D tailwindcss@^3.3.6 postcss autoprefixer
npx tailwindcss init -p

2. Configure Tailwind CSS

Update your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/finx-ui/**/*.{vue,js}"  // Add this line
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

3. Import Styles

In your main CSS file (e.g., src/assets/main.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Register FinX UI

In your main.js:

import { createApp } from 'vue'
import App from './App.vue'
import FinxUI from 'finx-ui'
import 'finx-ui/dist/style.css'

const app = createApp(App)
app.use(FinxUI)
app.mount('#app')

5. Start Using Components

<template>
  <div class="p-8 space-y-4">
    <fx-card>
      <template #header>
        <h2 class="text-xl font-semibold">Welcome to FinX UI</h2>
      </template>
      
      <div class="space-y-4">
        <fx-input 
          v-model="name" 
          label="Name" 
          placeholder="Enter your name"
        />
        
        <fx-button variant="primary" @click="handleSubmit">
          Submit
        </fx-button>
      </div>
    </fx-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const name = ref('')

const handleSubmit = () => {
  console.log('Name:', name.value)
}
</script>

📖 Complete Usage Guide → | View in Storybook →

💡 Usage Examples

Basic Form

<template>
  <fx-card padding="large">
    <form @submit.prevent="handleSubmit" class="space-y-4">
      <fx-input
        v-model="email"
        type="email"
        label="Email"
        placeholder="[email protected]"
        :error-message="emailError"
        required
      />
      
      <fx-input
        v-model="password"
        type="password"
        label="Password"
        required
      />
      
      <fx-button type="submit" variant="primary" class="w-full">
        Sign In
      </fx-button>
    </form>
  </fx-card>
</template>

<script setup>
import { ref, computed } from 'vue'

const email = ref('')
const password = ref('')

const emailError = computed(() => {
  if (!email.value.includes('@')) return 'Invalid email'
  return ''
})

const handleSubmit = () => {
  console.log('Login:', { email: email.value })
}
</script>

Data Table with Search

<template>
  <fx-data-table
    :columns="columns"
    :data="users"
    :page-size="10"
    searchable
    selectable
    v-model:current-page="currentPage"
    v-model:selected-rows="selectedRows"
  />
</template>

<script setup>
import { ref } from 'vue'

const currentPage = ref(1)
const selectedRows = ref([])

const columns = [
  { key: 'id', label: 'ID', sortable: true },
  { key: 'name', label: 'Name', sortable: true },
  { key: 'email', label: 'Email' },
  { key: 'status', label: 'Status' }
]

const users = [
  { id: 1, name: 'John Doe', email: '[email protected]', status: 'Active' },
  { id: 2, name: 'Jane Smith', email: '[email protected]', status: 'Inactive' }
]
</script>

Theme Switching

<template>
  <div class="p-8">
    <h2 class="text-xl font-semibold mb-4">Select Theme</h2>
    
    <fx-select
      v-model="currentTheme"
      :options="themeOptions"
      label="Theme"
      @change="handleThemeChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useTheme } from 'finx-ui'

const { currentTheme, setTheme } = useTheme()

const themeOptions = [
  { value: 'blue', label: 'Blue' },
  { value: 'purple', label: 'Purple' },
  { value: 'green', label: 'Green' },
  { value: 'orange', label: 'Orange' },
  { value: 'pink', label: 'Pink' },
  { value: 'indigo', label: 'Indigo' },
  { value: 'teal', label: 'Teal' },
  { value: 'red', label: 'Red' }
]

const handleThemeChange = (theme) => {
  setTheme(theme)
}
</script>

Mobile Bottom Navigation

<template>
  <div class="app-container">
    <!-- Main content -->
    <div class="content pb-20">
      <h1>My App</h1>
    </div>

    <!-- Bottom Navigation -->
    <fxm-bottom-nav fixed>
      <fxm-bottom-nav-item
        :icon="HomeIcon"
        label="Home"
        :active="currentTab === 'home'"
        @click="currentTab = 'home'"
      />
      <fxm-bottom-nav-item
        :icon="SearchIcon"
        label="Search"
        :active="currentTab === 'search'"
        @click="currentTab = 'search'"
      />
      <fxm-bottom-nav-item
        :icon="UserIcon"
        label="Profile"
        :active="currentTab === 'profile'"
        @click="currentTab = 'profile'"
      />
    </fxm-bottom-nav>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Home, Search, User } from 'lucide-vue-next'

const currentTab = ref('home')
const HomeIcon = Home
const SearchIcon = Search
const UserIcon = User
</script>

💡 Explore more examples in Storybook - See components in action with live code examples and interactive controls.

🎨 Theming & Customization

FinX UI includes 8 pre-configured color themes with instant switching and persistent storage:

Blue (default), Purple, Green, Orange
Pink, Indigo, Teal, Red

Using Themes

import { useTheme } from 'finx-ui'

const { currentTheme, setTheme, availableThemes } = useTheme()

// Change theme
setTheme('purple')

// Available themes: ['blue', 'purple', 'green', 'orange', 'pink', 'indigo', 'teal', 'red']

Custom Tailwind Colors

Override default colors in your tailwind.config.js:

export default {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          // ... your custom color scale
          900: '#1e3a8a',
        }
      }
    }
  }
}

📖 Complete Theming Guide →

📖 Resources & Documentation

📚 Core Documentation

Usage Guide - Complete integration and setup guide
Storybook Guide - Interactive component documentation
Component API - Detailed API reference for all components
Theme Guide - Theme switching and customization

🎯 Specialized Guides

Icon Support - Icon usage and troubleshooting
Mobile Components - Mobile-first FXM components
Dashboard Example - Complete fintech dashboard

🚀 Deployment

Nexus Deployment - Publishing to private registries

🎭 Live Examples

Dashboard Demo

FinX UI includes a complete fintech dashboard example showcasing:

📊 Interactive charts and data visualization
📈 Real-time statistics cards with trends
📋 Advanced data tables with search and pagination
🎨 Theme switching with 8 color schemes

# Run the dashboard example
git clone https://github.com/davidpriyadi/finx-ui.git
cd finx-ui
npm install
npm run dev
# Open http://localhost:5173/dashboard.html

📖 Dashboard Documentation →

❓ FAQ

The best way is through our Storybook documentation:

npm run storybook

This opens an interactive playground where you can test every component with different props and states.

Yes! FinX UI supports tree-shaking. Import only what you need:

import { FxButton, FxInput } from 'finx-ui'

Yes, type definitions are included in the package. While FinX UI is written in JavaScript, it provides full TypeScript support.

FinX UI is built with Tailwind CSS. You can:

Use Tailwind utility classes directly on components
Customize the Tailwind theme in your tailwind.config.js
Override component styles with custom CSS

Yes! All FinX UI components are WCAG compliant with:

Full keyboard navigation support
Proper ARIA labels and semantic HTML
Screen reader compatibility
Focus management

Yes! FinX UI works with Nuxt 3. Follow the standard installation steps and register components globally in a plugin or import them as needed.

🛠️ Development

Want to contribute or run the project locally?

# Clone and install
git clone https://github.com/davidpriyadi/finx-ui.git
cd finx-ui
npm install

# Development server with examples
npm run dev

# Run Storybook
npm run storybook

# Build library
npm run build

# Build Storybook
npm run build-storybook

Project Structure

finx-ui/
├── src/
│   ├── components/       # Component source files
│   ├── stories/          # Storybook stories
│   ├── styles/           # Global styles
│   └── index.js          # Main entry point
├── examples/             # Development examples
├── docs/                 # Documentation
├── .storybook/           # Storybook configuration
└── dist/                 # Built files (generated)

🤝 Contributing

We welcome contributions! Whether it's:

🐛 Bug reports and fixes
✨ New features and components
📖 Documentation improvements
💡 Ideas and suggestions

Please feel free to open an issue or submit a Pull Request.

📄 License

MIT License - feel free to use FinX UI in your personal and commercial projects.

📧 Support

Need help? Have questions?

📚 Storybook Documentation - Interactive component guide
📖 Documentation - Complete API reference
💬 GitHub Issues - Report bugs or request features
💡 Discussions - Ask questions and share ideas

Built with ❤️ for the fintech community

⭐ Star us on GitHub • 🐛 Report a Bug • 💡 Request a Feature