<Card title="Budget Summary">
<Stat label="Monthly Budget" value="$5,000" change="—" tone="info" />
<Stat label="Spent this month" value="$3,200" change="–$1,800" tone="warning" />
</Card>

<Card title="Largest Expense">
<Callout tone="info" title="Largest expense">Rent – $1,200</Callout>
</Card>

<Card title="Spending by Category">
<Chart type="pie" title="Spending by Category" x="Category" y="Amount">
| Category | Amount |
|---|---|
| Rent | $1,200 |
| Groceries | $400 |
| Utilities | $150 |
| Entertainment | $250 |
| Transportation | $100 |
</Chart>
</Card>

<Card title="Select Month">
<Select label="Month" placeholder="Select month" options="January | February | March | April | May | June | July | August | September | October | November | December" name="month" required=true />
</Card>

<Card title="Add Expense">
<Form name="expense-form">
<Input label="Description" placeholder="e.g., Lunch" />
<Input label="Amount" type="number" placeholder="50" required=true />
<Select label="Category" placeholder="Choose category" options="Food | Utilities | Entertainment | Transport | Other" name="category" required=true />
<Date label="Date" placeholder="Select date" required=true />
<Button variant="primary">Add expense</Button>
<Button variant="secondary">Cancel</Button>
</Form>
</Card>