Patterns · Pages
Dashboard
DashboardPageHomeScreen
The home of a money app: balance, quick actions, this month at a glance, recent activity and insights.
Web
Live, at a real viewport width. Switch to Phone to see the responsive layout.
Usage
import { DashboardPage } from '@nexub/patterns';
<DashboardPage
title="Good morning, Mei"
balance={{ value: 12480.32, currency: 'SGD', label: 'Total balance' }}
quickActions={[{ id: 'send', label: 'Send', icon: <Send />, onSelect: send }]}
stats={[{ label: 'Spent this month', value: 'S$1,842', delta: '8%', deltaType: 'decrease', sentiment: 'positive' }]}
recent={transactions}
onSelectTransaction={open}
onSeeAllActivity={() => router.push('/activity')}
/>On iOS & Android: HomeScreen
@nexub/react-native/patternsAlpha
import { HomeScreen } from '@nexub/react-native/patterns';
<HomeScreen greeting="Good morning, Mei" balance={balance} quickActions={actions} recent={txs} onTransactionPress={open} />Web vs mobile
Same tokens and prop names. Where the platforms differ:
| Web | iOS & Android | |
|---|---|---|
| Layout | Stats in a grid beside the activity at desktop widths. | One column: balance hero, up to four quick actions, recent activity, insights. |
| Refresh | Data refreshes in place. | Pull to refresh (onRefresh). |
| Actions | onSelect and an icon element. | onPress and an icon component. |
Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
HomeScreen props
| Prop | Type | Default | Description |
|---|---|---|---|
| greeting | string | — | e.g. "Good morning, Mei". Leave out when the native header shows the title. |
| balancerequired | { value: number; currency: string; label?: string } | — | — |
| quickActions | QuickAction[] | [] | Send, Add money, Request… Up to four fit one row. |
| recent | Transaction[] | [] | The latest few transactions. |
| onTransactionPress | (t: Transaction) => void | — | — |
| onSeeAllActivity | () => void | — | Shows "See all" beside Recent activity. |
| insights | Insight[] | [] | — |
| onRefresh | () => void | — | — |
| refreshing | boolean | false | — |
| labels | Partial<{ totalBalance: string; recentActivity: string; seeAll: string; insights: string }> | — | Copy overrides. |