Dark fintech dashboard: lime accent, hideable balance, period chart, activity list
import * as React from "react";
import { useState } from "react";
import { Pressable, ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Icon, SegmentedControl, Text, type IconName } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { BrandMark, GlowSpot, Mount, brandKey } from "../shared";
export interface DashboardTxn {
id: string;
merchant: string;
detail: string;
amount: number;
icon: IconName;
}
export interface DashboardDarkScreenProps {
name?: string;
balance?: number;
transactions?: DashboardTxn[];
onTxnPress?: (txn: DashboardTxn) => void;
onSend?: () => void;
onAdd?: () => void;
onMore?: () => void;
}
const TXNS: DashboardTxn[] = [
{ id: "1", merchant: "Whole Foods", detail: "Groceries", amount: -86.4, icon: "shopping-cart" },
{ id: "2", merchant: "Salary — Sidio", detail: "Monthly pay", amount: 4200, icon: "briefcase" },
{ id: "3", merchant: "Blue Bottle", detail: "Coffee", amount: -6.75, icon: "coffee" },
{ id: "4", merchant: "MTA MetroCard", detail: "Transit", amount: -33.0, icon: "tram-front" },
{ id: "5", merchant: "Netflix", detail: "Subscription", amount: -15.49, icon: "play" },
];
/** Per-range fake sparkline — heights shift when the segment switches so the
* period control visibly does work. */
const RANGES = ["1W", "1M", "1Y", "All"] as const;
const BARS: Record<(typeof RANGES)[number], number[]> = {
"1W": [28, 42, 36, 55, 48, 70, 62],
"1M": [40, 30, 52, 44, 66, 58, 74],
"1Y": [22, 48, 34, 60, 46, 72, 64],
All: [18, 36, 30, 54, 62, 58, 82],
};
const LIME = "#BEF04C";
const fmt = (n: number) =>
`${n < 0 ? "-" : "+"}$${Math.abs(n).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
/** Finance dashboard — dark variant (current fintech idiom): near-black
* canvas, ONE lime accent, huge thin balance with a working hide toggle,
* a period-switching chart, quick-action pills, and the transaction list. */
export function DashboardDarkScreen({
name = "Amara",
balance = 12480.22,
transactions = TXNS,
onTxnPress,
onSend,
onAdd,
onMore,
}: DashboardDarkScreenProps) {
const haptics = useHaptic();
const [range, setRange] = useState<string>("1M");
const [hidden, setHidden] = useState(false);
const bars = BARS[range as keyof typeof BARS] ?? BARS["1M"];
return (
<SafeAreaView className="flex-1 bg-neutral-950" edges={["top"]}>
<GlowSpot color="#A3E635" size={300} className="-top-20 right-[-80px]" />
<GlowSpot color="#1E9E63" size={240} className="bottom-[30%] left-[-110px]" />
<View className="flex-row items-center justify-between px-6 pt-3">
<View>
<Text className="text-base text-white/60">Hey, {name}</Text>
{/* Live date — dark dashboards lead with "tonight" context. */}
<Text className="text-xs text-white/40">
{new Date().toLocaleDateString("en-US", { weekday: "long", month: "short", day: "numeric" })}
</Text>
</View>
<Mount className="flex-row gap-2">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => setHidden((h) => !h)}
accessibilityLabel={hidden ? "Show balance" : "Hide balance"}
accessibilityState={{ expanded: hidden }}
className="h-10 w-10 rounded-full bg-white/10"
>
<Icon name="eye" size="md" color="#FFF" />
</Button>
<Button
variant="ghost"
size="icon"
haptic="light"
accessibilityLabel="Notifications"
className="h-10 w-10 rounded-full bg-white/10"
>
<Icon name="bell" size="md" color="#FFF" />
</Button>
</Mount>
</View>
<ScrollView showsVerticalScrollIndicator={false} contentContainerClassName="gap-6 px-6 pb-10 pt-4">
{/* Hero — huge thin balance, lime delta. */}
<Mount delay={60} className="gap-1">
<Text className="text-sm text-white/50">Total balance</Text>
<Text className="text-5xl font-light tracking-tight text-white tabular-nums">
{hidden ? "••••••" : `$${balance.toLocaleString("en-US", { minimumFractionDigits: 2 })}`}
</Text>
<View className="flex-row items-center gap-1.5 pt-1">
<Icon name="arrow-up" size="sm" color={LIME} />
<Text className="text-sm" style={{ color: LIME }}>
+$312.40 this month
</Text>
</View>
</Mount>
{/* Quick actions — solid dark pills, lime primary. */}
<Mount delay={120} className="flex-row gap-3">
<Button
onPress={() => {
haptics.light();
onSend?.();
}}
accessibilityLabel="Send money"
className="flex-1 rounded-full bg-[#BEF04C]"
textClassName="text-black font-semibold"
>
Send
</Button>
<Button
variant="outline"
onPress={() => {
haptics.light();
onAdd?.();
}}
accessibilityLabel="Add money"
className="flex-1 rounded-full border-white/20 bg-white/5"
textClassName="text-white font-semibold"
>
Add
</Button>
<Button
variant="outline"
onPress={() => {
haptics.light();
onMore?.();
}}
accessibilityLabel="More actions"
className="flex-1 rounded-full border-white/20 bg-white/5"
textClassName="text-white font-semibold"
>
More
</Button>
</Mount>
{/* Period chart — segmented control drives the bar heights. */}
<Mount delay={180} className="gap-4 rounded-2xl bg-white/5 p-5">
<SegmentedControl
options={[...RANGES]}
value={range}
onValueChange={setRange}
accessibilityLabel="Chart range"
className="self-start"
/>
<View
className="h-28 flex-row items-end justify-between gap-2"
accessibilityElementsHidden
importantForAccessibility="no"
>
{bars.map((h, i) => (
<View
key={i}
className={cn("flex-1 rounded-md", i === bars.length - 1 ? "opacity-100" : "opacity-30")}
style={{ height: `${h}%`, backgroundColor: LIME }}
/>
))}
</View>
</Mount>
{/* Transactions */}
<View className="gap-1">
<Text className="pb-2 text-base font-semibold text-white">Recent activity</Text>
{transactions.map((t) => (
<Pressable
key={t.id}
onPress={() => {
haptics.selection();
onTxnPress?.(t);
}}
accessibilityRole="button"
accessibilityLabel={`${t.merchant}, ${fmt(t.amount)}`}
className="flex-row items-center gap-3.5 rounded-2xl px-1 py-3"
>
{(() => {
const mark = brandKey(t.merchant);
return mark ? (
<BrandMark brand={mark} size={40} />
) : (
<View className="h-10 w-10 items-center justify-center rounded-full bg-white/10">
<Icon name={t.icon} size="md" color="#FFF" />
</View>
);
})()}
<View className="flex-1">
<Text className="font-medium text-white">{t.merchant}</Text>
<Text className="text-xs text-white/50">{t.detail}</Text>
</View>
<Text
className="font-medium tabular-nums"
style={{ color: t.amount > 0 ? LIME : "rgba(255,255,255,0.85)" }}
>
{fmt(t.amount)}
</Text>
</Pressable>
))}
</View>
</ScrollView>
</SafeAreaView>
);
}
DashboardDarkScreen.displayName = "DashboardDarkScreen";
Recreate the "Dashboard — Dark Screen" screen in React Native using LumioUI.
Goal: Dark fintech dashboard: lime accent, hideable balance, period chart, activity list Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.
## Setup
Fastest path — install the screen plus its component deps:
```bash
npx lumioui add finance-dashboard-dark
```
Or pull just the components: `npx lumioui add button icon segmented-control text`
Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
- nativewind@*
Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.
## Components — how, where, when
### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×5
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×4
### `segmented-control` — iOS 26 segmented picker — glass capsule track with a gliding liquid indicator pill, spring motion + haptics
- `<SegmentedControl>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×9
## Conventions (non-negotiable)
- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.
## Deliverable
One file: `screens/finance/dashboard-dark.tsx` exporting DashboardDarkScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.
## Reference implementation
The LumioUI source for this screen — reproduce it faithfully:
```tsx
import * as React from "react";
import { useState } from "react";
import { Pressable, ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Icon, SegmentedControl, Text, type IconName } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { BrandMark, GlowSpot, Mount, brandKey } from "../shared";
export interface DashboardTxn {
id: string;
merchant: string;
detail: string;
amount: number;
icon: IconName;
}
export interface DashboardDarkScreenProps {
name?: string;
balance?: number;
transactions?: DashboardTxn[];
onTxnPress?: (txn: DashboardTxn) => void;
onSend?: () => void;
onAdd?: () => void;
onMore?: () => void;
}
const TXNS: DashboardTxn[] = [
{ id: "1", merchant: "Whole Foods", detail: "Groceries", amount: -86.4, icon: "shopping-cart" },
{ id: "2", merchant: "Salary — Sidio", detail: "Monthly pay", amount: 4200, icon: "briefcase" },
{ id: "3", merchant: "Blue Bottle", detail: "Coffee", amount: -6.75, icon: "coffee" },
{ id: "4", merchant: "MTA MetroCard", detail: "Transit", amount: -33.0, icon: "tram-front" },
{ id: "5", merchant: "Netflix", detail: "Subscription", amount: -15.49, icon: "play" },
];
/** Per-range fake sparkline — heights shift when the segment switches so the
* period control visibly does work. */
const RANGES = ["1W", "1M", "1Y", "All"] as const;
const BARS: Record<(typeof RANGES)[number], number[]> = {
"1W": [28, 42, 36, 55, 48, 70, 62],
"1M": [40, 30, 52, 44, 66, 58, 74],
"1Y": [22, 48, 34, 60, 46, 72, 64],
All: [18, 36, 30, 54, 62, 58, 82],
};
const LIME = "#BEF04C";
const fmt = (n: number) =>
`${n < 0 ? "-" : "+"}$${Math.abs(n).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
/** Finance dashboard — dark variant (current fintech idiom): near-black
* canvas, ONE lime accent, huge thin balance with a working hide toggle,
* a period-switching chart, quick-action pills, and the transaction list. */
export function DashboardDarkScreen({
name = "Amara",
balance = 12480.22,
transactions = TXNS,
onTxnPress,
onSend,
onAdd,
onMore,
}: DashboardDarkScreenProps) {
const haptics = useHaptic();
const [range, setRange] = useState<string>("1M");
const [hidden, setHidden] = useState(false);
const bars = BARS[range as keyof typeof BARS] ?? BARS["1M"];
return (
<SafeAreaView className="flex-1 bg-neutral-950" edges={["top"]}>
<GlowSpot color="#A3E635" size={300} className="-top-20 right-[-80px]" />
<GlowSpot color="#1E9E63" size={240} className="bottom-[30%] left-[-110px]" />
<View className="flex-row items-center justify-between px-6 pt-3">
<View>
<Text className="text-base text-white/60">Hey, {name}</Text>
{/* Live date — dark dashboards lead with "tonight" context. */}
<Text className="text-xs text-white/40">
{new Date().toLocaleDateString("en-US", { weekday: "long", month: "short", day: "numeric" })}
</Text>
</View>
<Mount className="flex-row gap-2">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => setHidden((h) => !h)}
accessibilityLabel={hidden ? "Show balance" : "Hide balance"}
accessibilityState={{ expanded: hidden }}
className="h-10 w-10 rounded-full bg-white/10"
>
<Icon name="eye" size="md" color="#FFF" />
</Button>
<Button
variant="ghost"
size="icon"
haptic="light"
accessibilityLabel="Notifications"
className="h-10 w-10 rounded-full bg-white/10"
>
<Icon name="bell" size="md" color="#FFF" />
</Button>
</Mount>
</View>
<ScrollView showsVerticalScrollIndicator={false} contentContainerClassName="gap-6 px-6 pb-10 pt-4">
{/* Hero — huge thin balance, lime delta. */}
<Mount delay={60} className="gap-1">
<Text className="text-sm text-white/50">Total balance</Text>
<Text className="text-5xl font-light tracking-tight text-white tabular-nums">
{hidden ? "••••••" : `$${balance.toLocaleString("en-US", { minimumFractionDigits: 2 })}`}
</Text>
<View className="flex-row items-center gap-1.5 pt-1">
<Icon name="arrow-up" size="sm" color={LIME} />
<Text className="text-sm" style={{ color: LIME }}>
+$312.40 this month
</Text>
</View>
</Mount>
{/* Quick actions — solid dark pills, lime primary. */}
<Mount delay={120} className="flex-row gap-3">
<Button
onPress={() => {
haptics.light();
onSend?.();
}}
accessibilityLabel="Send money"
className="flex-1 rounded-full bg-[#BEF04C]"
textClassName="text-black font-semibold"
>
Send
</Button>
<Button
variant="outline"
onPress={() => {
haptics.light();
onAdd?.();
}}
accessibilityLabel="Add money"
className="flex-1 rounded-full border-white/20 bg-white/5"
textClassName="text-white font-semibold"
>
Add
</Button>
<Button
variant="outline"
onPress={() => {
haptics.light();
onMore?.();
}}
accessibilityLabel="More actions"
className="flex-1 rounded-full border-white/20 bg-white/5"
textClassName="text-white font-semibold"
>
More
</Button>
</Mount>
{/* Period chart — segmented control drives the bar heights. */}
<Mount delay={180} className="gap-4 rounded-2xl bg-white/5 p-5">
<SegmentedControl
options={[...RANGES]}
value={range}
onValueChange={setRange}
accessibilityLabel="Chart range"
className="self-start"
/>
<View
className="h-28 flex-row items-end justify-between gap-2"
accessibilityElementsHidden
importantForAccessibility="no"
>
{bars.map((h, i) => (
<View
key={i}
className={cn("flex-1 rounded-md", i === bars.length - 1 ? "opacity-100" : "opacity-30")}
style={{ height: `${h}%`, backgroundColor: LIME }}
/>
))}
</View>
</Mount>
{/* Transactions */}
<View className="gap-1">
<Text className="pb-2 text-base font-semibold text-white">Recent activity</Text>
{transactions.map((t) => (
<Pressable
key={t.id}
onPress={() => {
haptics.selection();
onTxnPress?.(t);
}}
accessibilityRole="button"
accessibilityLabel={`${t.merchant}, ${fmt(t.amount)}`}
className="flex-row items-center gap-3.5 rounded-2xl px-1 py-3"
>
{(() => {
const mark = brandKey(t.merchant);
return mark ? (
<BrandMark brand={mark} size={40} />
) : (
<View className="h-10 w-10 items-center justify-center rounded-full bg-white/10">
<Icon name={t.icon} size="md" color="#FFF" />
</View>
);
})()}
<View className="flex-1">
<Text className="font-medium text-white">{t.merchant}</Text>
<Text className="text-xs text-white/50">{t.detail}</Text>
</View>
<Text
className="font-medium tabular-nums"
style={{ color: t.amount > 0 ? LIME : "rgba(255,255,255,0.85)" }}
>
{fmt(t.amount)}
</Text>
</Pressable>
))}
</View>
</ScrollView>
</SafeAreaView>
);
}
DashboardDarkScreen.displayName = "DashboardDarkScreen";
```
Screen: https://lumioui.dev/screens/finance-dashboard-dark