npm package: @rayvelez/findash-ui
Description: FinDash UI - A modern financial dashboard design system built with React and Tailwind CSS
Author: FinDash
Latest version: 2.0.0

# @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

```bash
npm install @rayvelez/findash-ui
```

## Quick Start

```tsx
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:

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

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

## Complete Example

```tsx
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

```tsx
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:

```tsx
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:

```ts
// 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