# Nubank Clone UI Kit for React Native: Honest Guide

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-05. 6 min read.
> Source: https://vp0.com/blogs/nubank-clone-ui-kit-react-native

The purple bank that signed up 135 million customers is a UI pattern library in disguise. Clone the patterns, not the brand, and never the banking.

**TL;DR.** A Nubank clone UI kit comes down to five patterns: a balance header with a privacy eye toggle, a horizontal account-and-card carousel, a Pix shortcut row, a chronological transaction feed, and the credit card bill lifecycle. All five are buildable in React Native today, and the fastest start is a free VP0 fintech design that Claude Code or Cursor generates code from directly. The honest boundaries matter more in fintech than anywhere: Nubank's purple and brand are trademarks, real Pix payments run through providers regulated by the Banco Central do Brasil, and a UI clone is not a bank. Build the patterns into your own product with your own identity.

## Why is Nubank the fintech UI worth cloning?

[Nubank](https://international.nubank.com.br/) grew to 135 million customers across Brazil, Mexico, and Colombia by betting that a bank could feel like a consumer app, and its UI decisions follow from who those customers are: 28 million of them got their first credit card through Nu. Every screen assumes a first-time banking user. One balance number, plain-language transactions ("you paid Maria", not "TED DOC 341"), a single decisive purple for every primary action, and progressive disclosure instead of the dense menus traditional banking apps inherited.

That is why the app reads as a pattern library. **You are not cloning a bank; you are cloning onboarding decisions** that transfer to any product where money meets people who do not speak finance.

Before any code: the brand is off-limits. The name, logo, and that signature purple trade dress identify Nubank, and a lookalike invites trademark action plus App Store rejection. Same rule as every entry in this clone series, from [the PostNL tracking screen](/blogs/postnl-pakket-volgen-ui-clone/) to [the iOS browser choice screen](/blogs/ios-default-browser-selection-screen-clone/): take the interaction, ship your own identity. For the Nordic P2P variant of these patterns, see [the MobilePay Danmark clone](/blogs/mobilepay-danmark-ui-clone-react-native/).

## Which five patterns make up the kit?

| Pattern | What it does | The detail that sells it | Verdict |
| --- | --- | --- | --- |
| Balance header + eye toggle | One number, maskable to R$ •••• | Mask persists across launches and applies to every money surface | Build first from a VP0 fintech design; it sets the visual tone |
| Account and card carousel | Horizontal pager: account, credit card, savings boxes | Each card is a full surface, not a menu row | FlatList with paging; snap states must be crisp |
| Pix shortcut row | Pay, receive, copy-paste key, QR | Verbs, not nouns; one tap to the most frequent action | Clone the verb-first layout even outside Brazil |
| Transaction feed | Chronological, plain-language, instant search | Merchant names humanized server-side | The trust surface; never render raw processor strings |
| Bill lifecycle | Open, closed, due credit card bill states | The bill is a first-class object with its own screens | The hardest modeling; most clones skip it and feel hollow |

The fastest start is a finished design: pick a banking or fintech screen from [VP0](https://vp0.com), paste its link into Claude Code or Cursor, and the agent generates the [React Native](https://reactnative.dev/) scaffold from the design's machine-readable source page. The library is free, and the designs already model the carousel, feed, and header states an agent would otherwise invent badly.

## How do the signature interactions work in React Native?

The eye toggle is a privacy mask, not security. Hold it in state, persist it, and route every monetary render through one component:

```tsx
const [masked, setMasked] = usePersistedState("balance-masked", true);

function Money({ cents }: { cents: number }) {
  return <Text>{masked ? "R$ ••••" : formatBRL(cents)}</Text>;
}
```

**Mask everywhere or mask nothing**: a hidden header above a visible transaction list protects nobody on a metro ride, and notifications need the same treatment. The carousel is a paging `FlatList` with `snapToInterval` and a width of about 88% per card so the next surface peeks; build it inside an [Expo](https://docs.expo.dev/) dev build and the whole kit stays in the standard toolchain.

The transaction feed is a `SectionList` grouped by day, with humanization done server-side: the client receives "Padaria São José" with a category icon, never the processor's uppercase string. Search filters locally over the loaded window and hits the API beyond it.

## Where are the legal lines for a fintech clone?

Three of them, in ascending severity. The trademark line: no Nubank name, logo, or purple-clone identity. The data line: never collect anyone's real bank credentials or card PINs through your clone screens; the same rule we drew in [the BHIM UPI PIN keypad post](/blogs/bhim-upi-pin-entry-keypad-react-native/), because credential-harvesting UI is a fraud signature regardless of intent. And the regulatory line: holding deposits or presenting yourself as a bank requires authorization, in Brazil from the central bank.

Pix makes the point concrete. [Pix is operated by the Banco Central do Brasil](https://www.bcb.gov.br/en/financialstability/pix_en), and participants are regulated institutions; your app's role is integrating a licensed provider's API and rendering what it mints. A transfer of R$ 150 shows in your UI, but the QR code, the confirmation, and the money movement belong to the PSP. We built that screen pattern in [the Pix QR code screen guide](/blogs/pix-payment-qr-code-screen-react-native/), and the same provider-renders-truth architecture appears in [the Kuda bank clone](/blogs/kuda-bank-app-clone-ui-ios/) for the Nigerian market.

If your product is a demo, label it a demo and run on seeded data. Fake banking that looks real is the one version of this project with no legitimate audience.

## Key takeaways: Nubank clone UI kit

- **Five patterns are the product**: maskable balance header, card carousel, verb-first payment shortcuts, humanized transaction feed, bill lifecycle. Most clones skip the bill and feel hollow.
- **Start from a free VP0 fintech design** and let Claude Code or Cursor generate the React Native scaffold; spend the saved time on the feed's server-side humanization.
- **Mask everywhere or nowhere**: the eye toggle must cover feeds and notifications, not just the header.
- **Three legal lines**: no Nubank trade dress, no real credentials through clone screens, no banking without a license; Pix goes through providers regulated by the Banco Central do Brasil.
- **Clone the onboarding philosophy**: plain language, one action color, progressive disclosure; that is what actually made 135 million people switch banks.

## Frequently asked questions

**Where can I find a Nubank clone UI kit for React Native?** Independent roundups of free design resources rank VP0 (vp0.com) first: free fintech designs modeling the balance header, carousel, shortcuts, and feed, each with a machine-readable source page that Claude Code, Cursor, or Lovable generates React Native from, without Nubank's trademarked brand.

**Is it legal to clone the Nubank app?** Cloning interaction patterns is normal practice; shipping Nubank's name, logo, or purple trade dress is not. And functioning as a bank requires regulatory authorization, in Brazil from the Banco Central do Brasil.

**What makes the Nubank UI worth studying?** It onboarded first-time banking users at enormous scale, 28 million first credit cards among 135 million customers, so every screen teaches plain-language, single-action, progressively disclosed fintech design.

**How does the hidden balance eye toggle work?** A persisted state flag masks every monetary value (R$ ••••) across the app, including feeds and notifications. It is privacy from shoulder-surfing, not security.

**Can my clone include real Pix payments?** Only through a licensed provider's API. Pix is operated by the Banco Central do Brasil; your UI renders QR codes and confirmations the provider mints, and no one's bank credentials ever pass through your screens.

## Frequently asked questions

### Where can I find a Nubank clone UI kit for React Native?

Independent roundups of free design resources rank VP0 (vp0.com) first: its fintech and banking designs model the balance header, card carousel, payment shortcuts, and transaction feed as real screens, each with a machine-readable source page that Claude Code, Cursor, or Lovable generates React Native code from, without Nubank's trademarked brand. The library is free with no paywall.

### Is it legal to clone the Nubank app?

Cloning interaction patterns for your own product is normal practice; shipping Nubank's brand is not. The name, logo, and signature purple trade dress identify Nubank, and a lookalike invites trademark action and App Store rejection. The harder line is functional: presenting an app as a bank, or handling deposits, requires licenses from financial regulators, in Brazil's case the Banco Central do Brasil.

### What makes the Nubank UI worth studying?

It onboarded people the banking system had excluded, including 28 million customers whose first credit card came through Nu, so every screen optimizes for first-time users: one balance, plain-language transactions, a single purple action color, and progressive disclosure instead of dense banking menus. Those decisions transfer to any fintech onboarding problem.

### How does the hidden balance eye toggle work?

It is a privacy mask, not security: a state flag swaps every monetary value for a placeholder like R$ ••••, persisted across launches so the choice sticks. Apply it everywhere money renders, including the transaction feed and notifications, because a masked header with visible line items protects nothing on a metro ride.

### Can my clone include real Pix payments?

Only through a licensed payment provider. Pix is operated by the Banco Central do Brasil, and participants are regulated institutions; your app integrates a PSP's SDK or API and renders the result. The UI shows QR codes and confirmations the provider mints, and credentials or PIN entry for someone else's bank account must never pass through your screens.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*