@wealthx/shadcn

WealthX component library built on shadcn/ui, Tailwind CSS v4, and Radix primitives.

Install

yarn add @wealthx/shadcn

Peer dependencies: react and react-dom (^18.3.1)

Setup

Import the global stylesheet in your app entry point:

import "@wealthx/shadcn/styles.css";

Wrap your app with the ThemeProvider for runtime theming:

import { ThemeProvider } from "@wealthx/shadcn/theme";

<ThemeProvider primaryColor="#33FF99" secondaryColor="#162029">
  <App />
</ThemeProvider>

Usage

Import components from the package root or individual entry points:

// Barrel import
import { Button, Card, Input } from "@wealthx/shadcn";

// Individual entry points (better tree-shaking)
import { Button } from "@wealthx/shadcn/button";
import { Card } from "@wealthx/shadcn/card";

Components

| Component | Import path | Description | |-----------|------------|-------------| | Accordion | ./accordion | Collapsible content sections | | Alert | ./alert | Status messages | | AlertDialog | ./alert-dialog | Confirmation modals | | Avatar | ./avatar | User images with fallback, group, and badge | | Badge | ./badge | Labels and tags | | Button | ./button | Primary action element | | Calendar | ./calendar | Date picker calendar | | Card | ./card | Container with header, content, and footer | | Checkbox | ./checkbox | Single or multiple selection | | Chip | ./chip | Small labeled element | | DataTable | ./data-table | Table powered by TanStack Table | | DatePicker | ./date-picker | Calendar with popover | | Dialog | ./dialog | Modal dialog | | Drawer | ./drawer | Slide-out side panel | | DropdownMenu | ./dropdown-menu | Contextual menu | | Empty | ./empty | Empty state placeholder | | Field | ./field | Form field wrapper with label and error | | Input | ./input | Text input | | InputGroup | ./input-group | Input with addons and buttons | | InputOTP | ./input-otp | Multi-slot OTP entry | | Label | ./label | Form label | | Pagination | ./pagination | Page navigation | | Popover | ./popover | Floating content | | Progress | ./progress | Progress bar | | RadioGroup | ./radio-group | Single selection group | | Select | ./select | Dropdown select | | Separator | ./separator | Visual divider | | Sheet | ./sheet | Off-canvas panel | | Skeleton | ./skeleton | Loading placeholder | | Sonner | ./sonner | Toast notifications | | Spinner | ./spinner | Loading indicator | | Switch | ./switch | Toggle switch | | Table | ./table | Basic HTML table | | Tabs | ./tabs | Tabbed interface | | Textarea | ./textarea | Multi-line text input | | Toggle | ./toggle | Button toggle | | ToggleGroup | ./toggle-group | Grouped toggles | | Tooltip | ./tooltip | Hover hint |

Charts

Chart components built on Chart.js and react-chartjs-2. All charts read brand colors from ThemeProvider and render inside a Card wrapper.

| Component | Import path | Description | |-----------|------------|-------------| | CashflowBarChart | ./cashflow-bar-chart | Grouped bars showing income, expenses, and surplus/overspending per month | | ExpenseBarChart | ./expense-bar-chart | Stacked bar chart of expenses by category with period toggle | | IncomeBarChart | ./income-bar-chart | Stacked bar chart of income by source with period toggle | | TransactionsIncomeExpenseBarChart | ./transactions-income-expense-bar-chart | Horizontal bar comparing total income vs total expense |

TransactionsIncomeExpenseBarChart

Simplest chart — just two numbers:

import { TransactionsIncomeExpenseBarChart } from "@wealthx/shadcn";

<TransactionsIncomeExpenseBarChart
  totalIncome={12450.75}
  totalExpense={-8320.50}
  title="Transactions — Income vs Expense"
/>

IncomeBarChart / ExpenseBarChart

Stacked bars broken down by source or category. Supports "monthly" and "daily" granularity with a period toggle (3M / 6M / 12M).

import { IncomeBarChart } from "@wealthx/shadcn";

<IncomeBarChart
  incomeData={{
    months: ["Jul", "Aug", "Sep"],
    dates: ["2024-07-01", "2024-08-01", "2024-09-01"],
    datasets: [
      { label: "Employment", data: [7500, 7500, 7500] },
      { label: "Rental", data: [1200, 1200, 1400] },
    ],
  }}
  defaultPeriod={6}
  granularity="monthly"
/>

ExpenseBarChart has the same API — swap incomeData for expenseData. Income bars use the primary color; expense bars use the secondary color.

CashflowBarChart

Grouped bars showing income, expenses, and surplus/overspending. Period toggle is 3M / 6M / 12M (monthly only).

import { CashflowBarChart } from "@wealthx/shadcn";

<CashflowBarChart
  cashflowData={{
    months: ["Jul", "Aug", "Sep"],
    data: [
      { date: "2024-07-01", income: 9200, expenses: 6800, surplus: 2400, overspending: 0 },
      { date: "2024-08-01", income: 7500, expenses: 8100, surplus: 0, overspending: 600 },
      { date: "2024-09-01", income: 8800, expenses: 7200, surplus: 1600, overspending: 0 },
    ],
  }}
  defaultPeriod={6}
/>

Shared chart props

| Prop | Default | Description | |------|---------|-------------| | title | Varies | Card heading | | height | 280 (120 for Transactions) | Canvas height in px | | width | "100%" | Card width | | isLoading | false | Shows skeleton placeholder | | showLegend | true | Toggle legend visibility | | showXAxis / showYAxis | true | Toggle axis visibility | | legendPosition | "top" | "top" or "bottom" | | className | — | Class applied to the Card wrapper |

Utilities

| Export | Import path | Description | |--------|------------|-------------| | cn() | @wealthx/shadcn/lib/utils | Merge class names (clsx + tailwind-merge) | | Color utils | @wealthx/shadcn/lib/colors | hexToRgb, hexToOklch, getContrastText, getLuminance | | Typography | @wealthx/shadcn/typography | Rem-based type scale with CSS variable generators | | ThemeProvider | @wealthx/shadcn/theme | Runtime theme provider for tenant colors |

Design tokens

All tokens are defined as CSS custom properties in src/styles/globals.css:

• Colors — OKLch format. Core tokens: --background, --foreground, --primary, --secondary, --muted, --accent, --destructive. Status tokens: --warning, --success, --info. Chart series: --chart-1 through --chart-5.
• Typography — Figtree font family. 13 styles from Display down to Code, each with --font-size-*, --line-height-*, --letter-spacing-*, and --font-weight-* variables.
• Border radius — All radii set to 0px (sharp corners by design).

Development

# Install dependencies
yarn

# Build the package (CSS + JS)
yarn workspace @wealthx/shadcn build

# Watch mode
yarn workspace @wealthx/shadcn dev

# Lint
yarn workspace @wealthx/shadcn lint

Tech stack

• shadcn/ui — Component primitives
• Tailwind CSS v4 — Utility-first styles
• Radix Primitives via @base-ui/react — Accessible headless components
• Chart.js + react-chartjs-2 — Chart components
• TanStack Table — DataTable
• Lucide — Icons
• tsup — Build tooling (CJS + ESM)
• class-variance-authority — Variant management