Overview & Quick Start
Import components and styles into your project. Zero telemetry, fully typed, ready for production.
# 1. Clone repository
git clone https://github.com/anom-developer/wealthywidgets.git
cd wealthywidgets
# 2. Install dependencies & build
pnpm install
pnpm run build
# 3. Import styles & components in your React root
import 'wealthywidgets/dist/styles.css';
import { Button, Card, ActivityWidget, FinanceWidget } from 'wealthywidgets';| Component | Description | AI Generation |
|---|---|---|
FinanceWidget | Crypto & stock market tracker with sparkline chart & AI insights | ✦ Yes |
ActivityWidget | Scrollable event timeline with filtering & AI feed generation | ✦ Yes |
WeatherWidget | Live conditions + forecast card with animated gradients | ✦ Yes |
CodeWidget | Code block with syntax highlighting, editor & AI code generator | ✦ Yes |
Input | Text field with label, hint, live validation & AI generator | ✦ Yes |
Button | 6 style variants, 5 sizes, loading spinner, pill shape | — |
Badge | Status tags, pill badges & notification dot counters | — |
Card | Container with image, title, header extra & action slots | — |
Modal | Accessible dialog with Escape key, scroll-lock & focus trap | — |
Dropdown | Custom single/multi-select with search & tag chips | — |
ProgressBar | Status-coloured progress bar with animated striped fill | — |
Tooltip | 4 directional placements, light/dark themes, hover delays | — |
Toast | Global notifications with auto-dismiss & 6 screen positions | — |
Badge
Compact label for status, category, or notification count indicators.
Input
Text field with label, icons, hint, live validation states, and inline AI prompt generator.
Card
Flexible content container with optional image, title, description, and action slots.
Modal
Accessible dialog with focus management, Escape key, backdrop click, and Portal rendering.
Dropdown
Custom single and multi-select dropdown with instant search filter, tag removal, and keyboard accessibility.
ProgressBar
Status-coloured progress indicator with label positions, striped mode, and real-time animation.
Tooltip
Hover/focus hint with 4 placements, 2 variants, and configurable delays.
Toast
App-wide notifications via React Context. Wrap your app with <ToastProvider>, call useToast() anywhere inside.
ActivityWidget ✦
Scrollable event timeline with status dots, relative timestamps, category filtering, and live AI feed generation.
WeatherWidget ✦
Current conditions card with dynamic gradients, city switcher, °C/°F toggle, and 7-day forecast strip.
CodeWidget ✦
Dark-themed code viewer with macOS toolbar, line numbers, live syntax highlighting, editable mode, and AI snippet generation.
FinanceWidget ✦ NEW
Real-time crypto and stock portfolio tracker with interactive SVG sparkline charts, currency switcher, and AI financial analysis.
Bullish momentum detected. Price is holding key support above the 20-day EMA with expanding volume (+14%). Relative Strength Index (RSI) at 61 indicates healthy buy-side pressure.
Ticker Bar ✦ LIVE
Continuous marquee ticker bar with live crypto and stock quotes, hover-pause, multi-currency support, and mobile optimization.
<!-- 1. Include WealthyWidgets Bundle -->
<script src="https://anom-developer.github.io/wealthywidgets/dist/wealthywidgets.js"></script>
<!-- 2. Use anywhere in HTML -->
<wealthy-ticker symbols="BTC,ETH,SOL,BNB,DOGE,AAPL,NVDA" currency="USD" speed="25"></wealthy-ticker>Widget Embed Studio 🚀
Configure any widget, preview it in real time, and copy ready-to-use embed code for your website (HTML, WordPress, Webflow, React, Next.js).
- Click «Copy Notion URL» above.
- In Notion, type
/embedon any page and press Enter. - Paste the URL and click Embed link.
- Resize the block to fit your Notion dashboard!