Skip to content
nexubDesign System
v2.4.0

Examples

Examples

Whole screens built only from public Nexub exports, on the web and on phones. Use them as references for layout, density and behaviour.

Dashboards

@nexub/reactWeb dashboard

AppHeader, NavigationRail, StatCards, a chart, a DataTable, a plan picker and an assistant panel.

@nexub/react-nativeMobile dashboard

HomeScreen: balance, quick actions, activity and insights, live in a phone frame.

Page references

Each page template, live on the web and as its native screen.

DashboardPage · HomeScreenDashboard

The home of a money app: balance, quick actions, this month at a glance, recent activity and insights.

ActivityPage · ActivityListActivity

Transactions grouped by day, with refresh, load more and row actions.

TransactionDetailPage · TransactionDetailTransaction detail

One transaction: the amount, who and when, the details as rows, and follow-up actions.

SettingsPage · SettingsScreenSettings

Grouped settings with a profile header, controls at the end of each row, and a destructive sign-out.

SignInPage · SignInScreenSign in

Email and password with passkey autofill, a biometric or passkey option, and recovery links.

CheckoutPage · AmountStepSend money

Amount, review and result in one page: live quote, fee and rate, balance check, and focus moved to each step.

ChatPage · ChatScreenChat

An assistant conversation: messages, streaming, thinking state, and a composer with stop.

PaywallPage · PaywallScreenPaywall

Plans as a radio group, one Continue button, restore and terms.