@wealthx/ui

A comprehensive React component library and design system built on MUI (Material UI), with tenant-aware theming, design tokens, and charts.

Installation

npm install @wealthx/ui
# or
yarn add @wealthx/ui

Peer dependencies

npm install react react-dom

Quick start

Wrap your app with the ThemeProvider and start using components:

import { ThemeProvider } from "@wealthx/ui/theme";
import { Button } from "@wealthx/ui/button";
import { Typography } from "@wealthx/ui/typography";

function App() {
  return (
    <ThemeProvider primary="#33FF99" secondary="#162029">
      <Typography variant="h4">Hello WealthX</Typography>
      <Button variant="contained">Get started</Button>
    </ThemeProvider>
  );
}

Theming

The theme system generates a full MUI theme from two tenant-driven brand colors. All foundation tokens (text, background, border, state colors, gray scale) are built in.

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

<ThemeProvider primary="#5B2EFF" secondary="#0A1628">
  {children}
</ThemeProvider>

You can also create a theme object directly for advanced use cases:

import { createDesignTheme } from "@wealthx/ui/theme";

const theme = createDesignTheme({
  primary: "#5B2EFF",
  secondary: "#0A1628",
});

CSS variables

Generate CSS custom properties from your theme config:

import { buildCssVariables } from "@wealthx/ui/theme";

const vars = buildCssVariables({ primary: "#5B2EFF", secondary: "#0A1628" });

Design tokens

Foundation colors, typography scales, and spacing are all exported:

import {
  FOUNDATION_COLORS,
  GRAY_SCALE,
  CHART_COLORS,
  FONT_FAMILY_SANS,
  TYPOGRAPHY,
  SPACING_SCALE,
} from "@wealthx/ui/theme";

Components

Every component is a thin, typed wrapper around its MUI counterpart — props are fully compatible.

| Category | Components | |---|---| | Inputs | Button, IconButton, ButtonGroup, Checkbox, Radio, RadioGroup, Select, Slider, Switch, TextField, Autocomplete, Rating, ToggleButton, ToggleButtonGroup, SelectionButtonGroup, Fab | | Data display | Typography, Avatar, Badge, Chip, Divider, List, Table, Tooltip, ImageList | | Feedback | Alert, Dialog, Progress, Skeleton, Snackbar, Backdrop | | Surfaces | Accordion, Card, Paper, AppBar | | Navigation | Breadcrumbs, Drawer, Link, Menu, Pagination, SpeedDial, Stepper, Tabs, BottomNavigation | | Layout | Box, Container, Grid, Stack, Masonry | | Timeline | Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineDot, TimelineContent | | Charts | Chart components via @wealthx/ui/charts (built on Chart.js) |

Import pattern

Each component has its own entry point for optimal tree-shaking:

import { Button } from "@wealthx/ui/button";
import { Card } from "@wealthx/ui/card";
import { CardContent } from "@wealthx/ui/card-content";
import { TextField } from "@wealthx/ui/text-field";
import { Stack } from "@wealthx/ui/stack";

Charts

Built on Chart.js and react-chartjs-2:

import { /* chart components */ } from "@wealthx/ui/charts";

The theme includes a purpose-built CHART_COLORS palette with 10 series colors.

License

MIT