Receipt View
Ledger-style label/value rows. Compound API: ReceiptView, Section, Row, Total, Divider.
Cash flow waterfall
Income
Gross Income$14,200.00
Taxes$3,840.00
Net Income$10,360.00
Spending
Credit Card Spending$3,240.00
Recurring Expenses$2,180.00
Investments$1,500.00
Surplus$3,440.00
Deficit
Net Income$8,200.00
Credit Card Spending$5,340.00
Recurring Expenses$2,180.00
Investments$1,500.00
Deficit−$820.00
Developer
import { ReceiptView } from "@financial-tracking/design-system"ReceiptView
Root container. Compose with ReceiptView.Section, .Row, .Total, and .Divider.
| Prop | Type | Default |
|---|---|---|
childrenRequired. | ReactNode | — |
className | string | — |
ReceiptView.Section
| Prop | Type | Default |
|---|---|---|
titleOptional uppercase section label. | string | — |
actionOptional action beside the title. | ReactNode | — |
childrenRequired. | ReactNode | — |
ReceiptView.Row
| Prop | Type | Default |
|---|---|---|
labelRequired. | string | — |
childrenValue content. | ReactNode | — |
deductionMuted deduction style (prefixed with −). | boolean | false |
onClickRenders as a button when set. | () => void | — |
ReceiptView.Total
| Prop | Type | Default |
|---|---|---|
labelRequired. | string | — |
childrenProminent final value. | ReactNode | — |
ReceiptView.Divider
| Prop | Type | Default |
|---|---|---|
className | string | — |