## Net Worth (S—438)

Edit assets and debts line by line and watch net worth, the debt ratio and each line’s share update.

- URL: https://sundaeui.dev/components/net-worth
- Category: Cards & data visualization · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/net-worth.json`
- Tags: balance-sheet, budget, personal-finance, liabilities, net-worth, assets

Assets and liabilities are tabs of editable rows with amounts. Each row shows its share of its side as a thin bar.
The headline shows net worth with the debt-to-asset ratio, and a split bar compares the two sides at a glance.

### Usage

```tsx
import { NetWorth } from '@/components/sundae/net-worth'

<NetWorth />
```

### Props

- `currency` (`string`, default `'USD'`): ISO currency code.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Personal finance apps, advisor dashboards, year-end reviews.

### When not to use

- Live account balances: connect to an aggregator.

### Accessibility

- Rows have labelled name and amount inputs.
- Net worth is a live region.
- Reduced motion removes the movement and keeps every state change.