Coinmere

Components

Every Coinmere building block in one place, in both themes. Copy from the source path under each section.

Buttons

Pill buttons in five variants and three sizes. Pass href to render a link.

components/ui/button.tsx
Link

Badges & status

Badges label state; add dot so state never relies on color alone. Status pairs a dot with text.

components/ui/badge.tsx · components/ui/misc.tsx
NeutralPlusCompletedPendingDeclined
OnlineDue in 3 daysOver budgetArchived

Inputs

Input, Select and Textarea share one sunken style. Wrap them in Field for a label and hint.

components/ui/field.tsx

Available: $8,240.56

Switch

Accessible role=switch toggle. Give it an id and label; onChange reports the new value.

components/ui/switch.tsx

Tabs

Underline tabs with arrow-key navigation and optional counts.

components/ui/tabs.tsx

All transactions this month.

Progress

Thin progress bar for budgets and goals. Tone switches to warning or danger near and over the limit.

components/ui/misc.tsx

Groceries$612 of $800

Dining$418 of $450

Shopping$386 of $300

Avatars

Initials avatar in three sizes. The tone is derived from the name, so it stays stable.

components/ui/avatar.tsx
  • Jonah Reyes@jonahr
  • Priya Anand@priya.a
  • Marcus Lind@mlind

CategoryIcon & Amount

Category tiles for every spending category, and signed amounts: income in success, spending in ink.

components/ui/finance.tsx
  • Groceries
  • Dining
  • Transport
  • Shopping
  • Bills
  • Health
  • Travel
  • Entertainment
  • Income
  • Transfer
  • Salary · Northbeam StudioIncome+$5,200.00
  • Fernwood MarketGroceries−$84.12
  • Paid by Jonah ReyesTransfer+$45.00

CardFace

Payment card art in four tones, physical or virtual, with a frozen overlay. Networks are fictional.

components/ui/finance.tsx
Everyday
•••• •••• •••• 4821
ELENA MARSH08/29
Orbit
tone="violet" · physical
Online shoppingVirtual
•••• •••• •••• 6612
ELENA MARSH03/28
Orbit
tone="teal" · virtual
Travel
•••• •••• •••• 3305
ELENA MARSH11/28
Meridian
tone="ink" · physical
SubscriptionsVirtual
•••• •••• •••• 0457
ELENA MARSH06/27
Orbit
tone="rose" · virtual
Everyday
•••• •••• •••• 4821
ELENA MARSH08/29
Orbit
Frozen
frozen

EmptyState

Icon, title, one helpful sentence and an optional action.

components/ui/misc.tsx

No transactions yet

Add money or make your first card payment and it will show up here.

Charts

LineChart, BarChart, Donut, Sparkline and StatTile. Series use chart-1→4 in order; income is chart-2, spending chart-1.

components/ui/charts.tsx

Spent this month

$2,142

▼ 40%

Income this month

$5,245

▼ 3%

Savings rate

59%

▲ 25 pts

LineChart · Income vs spending, 12 months

  • Spending
  • Income
02.0k4.0k6.0k8.0kNovJanMarMayJulSep

BarChart · Daily spending, October

$0.00$300$600Oct 1Oct 3Oct 5Oct 7Oct 9Oct 11Oct 13

Donut · Top categories

$1,581spent
  • Groceries39%
  • Dining26%
  • Shopping24%
  • Transport10%

Sparkline · Decorative trend

Net worth$47k
Spent in October$1.5k