OverviewPage
Stripe OverviewPage + PageModuleA feature's landing page: key figures and charts in the primary column; tasks, insights, quick links and help in an optional 20rem secondary column that stacks below on smaller screens. Columns hold PageModules — a title, an optional subtitle and text-link actions over a hairline.
Wallets
Wallets
Money you hold for your customers.
Balances
Last 30 days
- Total held
- ₹4,82,190
- Wallets
- 128
- Top-ups
- 312
Recent wallets
When to use
- The first page of a feature (Wallets, Messaging) before anyone opens a record.
- PageModule actions are teal text links — “View all” with href, “Create” with onPress.
- pending shows a skeleton with the same number of columns as the loaded page.
Not for
- A record — use DetailLayout.
- A plain list — PageHeader over a table.
Props
OverviewPage
| Prop | Type | Description |
|---|---|---|
| header | ReactNode | Usually a PageHeader; stays visible while pending. |
| primaryColumn | ReactNode | PageModules with figures and charts. |
| secondaryColumn | ReactNode | PageModules with tasks, links and help. 20rem from xl. |
| pending | boolean Default false | A skeleton with the same columns. |
| className | string | Extra classes on the outer element. |
PageModule
| Prop | Type | Description |
|---|---|---|
| title | ReactNode | The module's heading. |
| subtitle | ReactNode | One grey line under it. |
| extraActions | PageModuleAction[] | { label, onPress | href, disabled, type } — text links; type "destructive" is red. |
| children | ReactNode | The content. |
| contentClassName | string | Classes on the content wrapper. |
| className | string | Extra classes on the outer element. |