<Card title="Budget Overview">
<Stat label="Budget" value="$2,000" change="0%" tone="neutral" />
<Stat label="Spent" value="$1,350" change="68%" tone="warning" />
<Progress value="68" max="100" label="Budget used" tone="info" />
<Callout tone="warning" title="Largest Expense">Rent – $800</Callout>
<Select label="Month" placeholder="Select month" options="January | February | March | April | May | June" required=false />
<Form name="expense-form">
<Input label="Amount" type="number" placeholder="e.g., 120" required=true />
<Input label="Category" type="text" placeholder="Food, Rent, etc." required=true />
<Input label="Date" type="date" placeholder="Select date" required=true />
<Button variant="primary">Add Expense</Button>
</Form>
</Card>

<Card title="Spending by Category">
<Chart type="pie" title="Category Breakdown" x="Category" y="Amount">
| Category | Amount |
|---|---|
| Rent | 800 |
| Groceries | 300 |
| Utilities | 150 |
| Transport | 100 |
| Entertainment | 200 |
| Misc | 100 |
</Chart>
</Card>