@rayvelez/findash-ui

A modern financial dashboard design system built with React. Features a vibrant green and purple color palette with dark mode support, liquid glass effects, and beautifully crafted dashboard components.

Zero-config - Just install, import, and use. No Tailwind setup required.

Installation

npm install @rayvelez/findash-ui

Quick Start

import { DashboardTemplate } from "@rayvelez/findash-ui";
import "@rayvelez/findash-ui/styles";

function App() {
  return <DashboardTemplate />;
}

That's it! The styles are pre-compiled and bundled.

Dark Mode

Toggle dark mode by adding the dark class to your root element:

// Enable dark mode
document.documentElement.classList.add("dark");

// Toggle
document.documentElement.classList.toggle("dark");

Complete Example

import { DashboardTemplate, type DashboardData } from "@rayvelez/findash-ui";
import "@rayvelez/findash-ui/styles";

const data: DashboardData = {
  user: {
    name: "Alex Morgan",
    role: "Premium User",
    avatarUrl: "https://example.com/avatar.jpg",
  },
  balance: {
    currentBalance: 15368,
    percentageChange: 14,
    averageScore: 18324,
  },
  investmentGrowth: {
    percentage: 8.2,
    monthlyAverage: 12450,
    totalValue: 24890,
  },
  btcPrice: {
    price: 21105,
    changePercentage: 28.21,
  },
  marketCap: {
    value: "1,3trln$",
  },
  salesStatistics: {
    visitors: 2025,
    updatedDaysAgo: 1,
  },
  portfolio: [
    { asset: "Bitcoin", symbol: "BTC", percentage: 45, color: "bg-primary" },
    { asset: "Ethereum", symbol: "ETH", percentage: 30, color: "bg-secondary" },
    { asset: "Solana", symbol: "SOL", percentage: 15, color: "bg-foreground" },
    { asset: "Others", symbol: "---", percentage: 10, color: "bg-muted" },
  ],
  watchlist: [
    { name: "Cardano", symbol: "ADA", price: "0.58", change: "+5.2%", positive: true },
    { name: "Polkadot", symbol: "DOT", price: "7.23", change: "-2.1%", positive: false },
  ],
  forecasts: [
    { year: "2024", description: "Mainstream adoption", completed: false },
    { year: "2025", description: "1 BTC reaches $500K", completed: false },
  ],
  transactions: {
    summary: "12,53 ETH/1 BTC",
  },
};

function App() {
  return (
    <DashboardTemplate
      data={data}
      onThemeToggle={() => document.documentElement.classList.toggle("dark")}
      onNavItemClick={(item) => console.log("Nav:", item)}
      onActionClick={(action) => console.log("Action:", action)}
    />
  );
}

Individual Components

import {
  SalesStatisticsCard,
  CurrentBalanceCard,
  BtcPriceCard,
  PortfolioAllocationCard,
  WatchlistCard,
  FloatingNavBar,
  Sidebar,
  MobileNav,
} from "@rayvelez/findash-ui";
import "@rayvelez/findash-ui/styles";

// Use any component individually
<SalesStatisticsCard visitors={2025} updatedDaysAgo={1} />
<CurrentBalanceCard balance={15368} percentageChange={14} />
<BtcPriceCard price={21105} changePercentage={28.21} />

Components

Dashboard Cards

| Component | Description | |-----------|-------------| | SalesStatisticsCard | Visitor stats with bar chart | | CurrentBalanceCard | Balance with gauge visualization | | InvestmentGrowthCard | Investment metrics with gauge | | BtcPriceCard | Bitcoin price with progress bar | | MarketCapCard | Market cap with line chart | | MarketForecastCard | Timeline of predictions | | PortfolioAllocationCard | Portfolio breakdown | | WatchlistCard | Cryptocurrency watchlist | | RecentTransactionsCard | Transaction summary | | QuickActionsCard | Quick action buttons |

Navigation

| Component | Description | |-----------|-------------| | Sidebar | Desktop sidebar navigation | | MobileNav | Mobile top navigation with slide-out menu | | FloatingNavBar | Floating action bar with glass effect |

Template

| Component | Description | |-----------|-------------| | DashboardTemplate | Complete dashboard layout |

TypeScript

All components are fully typed:

import type {
  DashboardData,
  NavItem,
  WatchlistItem,
  PortfolioAllocation,
  ForecastItem,
  ActionItem,
  UserInfo,
} from "@rayvelez/findash-ui";

Advanced: Custom Tailwind Setup

If you want to customize the theme via Tailwind, you can use the preset:

// tailwind.config.ts
import type { Config } from "tailwindcss";

export default {
  presets: [require("@rayvelez/findash-ui/tailwind.preset")],
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@rayvelez/findash-ui/dist/**/*.{js,mjs}",
  ],
} satisfies Config;

License

MIT