# Pocket: mobile money app > A bold five-page landing site for a money app: a working app inside a phone frame, live feature demos (freeze a card, round-up calculator, bill splitting, currency conversion), pricing with a yearly switch, security and download. A shadcn/ui block from the [@ballmac](https://ui.ballmac.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/ballmac/template-pocket). - Page, with a live preview: https://shadcn.exchange/r/ballmac/template-pocket - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/ballmac/template-pocket-light-90d279731f112f31.png - Registry item: https://ui.ballmac.com/r/template-pocket.json - Categories: templates - Listed: 2026-10-14, source last changed 2026-10-14 ## Install ```bash npx shadcn@latest add https://ui.ballmac.com/r/template-pocket.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `lucide-react` - Registry items: `utils`, `https://ui.ballmac.com/r/phone-frame.json`, `https://ui.ballmac.com/r/switch.json`, `https://ui.ballmac.com/r/slider.json` ## Notes from the registry Pages are at /pocket, /pocket/features, /pocket/pricing, /pocket/security and /pocket/download. Plans, comparison rows, FAQ and transactions live in pocket-data.ts. PocketApp (in pocket-theme.tsx) is the working app inside the phone; replace its content with your own screens. The palette is pocketCss. ## Files ### `registry/ballmac/components/templates/pocket/pocket-fonts.ts` ```ts // Ballmac UI: Pocket template fonts. https://ui.ballmac.com/templates/template-pocket import { Gabarito } from "next/font/google" export const pocketSans = Gabarito({ variable: "--pocket-sans", subsets: ["latin"], display: "swap", preload: false }) ``` ### `registry/ballmac/components/templates/pocket/pocket-data.ts` ```ts // Ballmac UI: Pocket template data. https://ui.ballmac.com/templates/template-pocket export const transactions = [ { name: "Corner Café", detail: "Today, 8:12", amount: -4.8, tone: 1, emoji: "☕" }, { name: "From Sam", detail: "Yesterday", amount: 120, tone: 0, emoji: "↓" }, { name: "City Transit", detail: "Yesterday", amount: -2.75, tone: 3, emoji: "🚆" }, { name: "Market Hall", detail: "Monday", amount: -38.12, tone: 2, emoji: "🥬" }, { name: "Pilates Studio", detail: "Sunday", amount: -22, tone: 4, emoji: "🧘" }, ] export type Plan = { id: string; name: string; monthly: number; annual: number; blurb: string; features: string[]; featured?: boolean } export const plans: Plan[] = [ { id: "free", name: "Free", monthly: 0, annual: 0, blurb: "Everything you need to stop using a spreadsheet.", features: ["Free virtual card", "Instant transfers to friends", "Round-ups to one pot", "Spending insights"] }, { id: "plus", name: "Plus", monthly: 6, annual: 5, blurb: "For people who travel, save and split things.", features: ["Everything in Free", "Fee-free spending in 40 currencies", "Unlimited savings pots", "Bill splitting with reminders", "Priority chat support"], featured: true }, { id: "metal", name: "Metal", monthly: 16, annual: 13, blurb: "A heavy card and a lot of perks.", features: ["Everything in Plus", "Metal card, engraved", "Airport lounge passes", "Travel and phone insurance", "Cashback on every purchase"] }, ] export const compare = [ ["Virtual card", true, true, true], ["Physical card", "$5", true, true], ["Savings pots", "1", "Unlimited", "Unlimited"], ["Foreign spending fee", "1.5%", "None", "None"], ["ATM withdrawals a month", "$200", "$800", "Unlimited"], ["Bill splitting", false, true, true], ["Cashback", false, false, "1%"], ["Support", "Chat", "Priority chat", "24/7 phone"], ] as const export const faqs = [ { q: "Is Pocket a bank?", a: "Pocket is a money app. Accounts are held at Harbor Bank, N.A., Member FDIC, and your deposits are insured up to $250,000." }, { q: "How do round-ups work?", a: "Every card purchase is rounded up to the next dollar and the difference moves to your pot. Spend $4.20 and $0.80 is saved." }, { q: "Are there hidden fees?", a: "No. The Free plan has no monthly fee, no overdraft fee and no minimum balance. Paid plans show their price on this page and nowhere else." }, { q: "What if I lose my phone?", a: "Sign in on another device, freeze the card in one tap and revoke the old phone. Nothing is stored on the device." }, { q: "Which countries does it work in?", a: "The card works anywhere Visa does. Sending money to friends is available in 31 countries today." }, { q: "Can I close my account?", a: "Yes, any time, in the app. Your balance goes to the bank account you choose within one working day." }, ] export const currencies = [["USD", 1, "$"], ["EUR", 0.92, "€"], ["GBP", 0.79, "£"], ["JPY", 156.4, "¥"], ["MXN", 17.1, "MX$"]] as const export const money = (n: number, digits = 2) => `${n < 0 ? "−" : ""}$${Math.abs(n).toLocaleString("en-US", { minimumFractionDigits: digits, maximumFractionDigits: digits })}` ``` ### `registry/ballmac/components/templates/pocket/pocket-theme.tsx` ```tsx // Ballmac UI: Pocket template shell. https://ui.ballmac.com/templates/template-pocket "use client" import * as React from "react" import { Apple, Bell, CreditCard, Home as HomeIcon, Menu, PiggyBank, Play, QrCode, Send, X } from "lucide-react" import { PhoneFrame } from "@/components/ballmac/phone-frame" import { Switch } from "@/components/ballmac/switch" import { money, transactions } from "@/components/ballmac/templates/pocket/pocket-data" import { pocketSans } from "@/components/ballmac/templates/pocket/pocket-fonts" import { cn } from "@/lib/utils" type PocketPage = "home" | "features" | "pricing" | "security" | "download" type PocketHrefs = Record const defaultHrefs: PocketHrefs = { home: "/pocket", features: "/pocket/features", pricing: "/pocket/pricing", security: "/pocket/security", download: "/pocket/download" } /** Pocket's palette: mint paper, navy ink, cobalt and one loud lime. Dark mode is midnight with the lime turned up. */ const pocketCss = ` .pocket-theme,body:not(:has([data-gallery])):has(.pocket-theme){--background:oklch(0.985 0.012 165);--foreground:oklch(0.2 0.06 265);--card:oklch(1 0 0);--card-foreground:oklch(0.2 0.06 265);--popover:oklch(1 0 0);--popover-foreground:oklch(0.2 0.06 265);--primary:oklch(0.47 0.22 267);--primary-foreground:oklch(0.99 0.005 165);--secondary:oklch(0.95 0.025 165);--secondary-foreground:oklch(0.2 0.06 265);--muted:oklch(0.95 0.02 165);--muted-foreground:oklch(0.45 0.05 265);--accent:oklch(0.93 0.04 150);--accent-foreground:oklch(0.2 0.06 265);--border:oklch(0.2 0.06 265 / 12%);--input:oklch(0.2 0.06 265 / 20%);--ring:oklch(0.55 0.22 267);--surface:oklch(0.965 0.02 165);--destructive:oklch(0.52 0.21 27);--chart-1:oklch(0.9 0.2 125);--chart-2:oklch(0.72 0.17 30);--chart-3:oklch(0.62 0.2 300);--chart-4:oklch(0.78 0.13 200);--chart-5:oklch(0.85 0.14 85);--pocket-ink:oklch(0.2 0.06 265);--pocket-on-lime:oklch(0.2 0.06 265);--pocket-navy:oklch(0.2 0.07 265);--pocket-on-navy:oklch(0.98 0.01 165);--radius:1.5rem} .dark .pocket-theme,.dark body:not(:has([data-gallery])):has(.pocket-theme){--background:oklch(0.16 0.045 265);--foreground:oklch(0.96 0.015 165);--card:oklch(0.21 0.05 265);--card-foreground:oklch(0.96 0.015 165);--popover:oklch(0.23 0.05 265);--popover-foreground:oklch(0.96 0.015 165);--primary:oklch(0.9 0.2 125);--primary-foreground:oklch(0.2 0.06 265);--secondary:oklch(0.26 0.05 265);--secondary-foreground:oklch(0.96 0.015 165);--muted:oklch(0.25 0.05 265);--muted-foreground:oklch(0.76 0.04 250);--accent:oklch(0.3 0.06 265);--accent-foreground:oklch(0.96 0.015 165);--border:oklch(1 0 0 / 11%);--input:oklch(1 0 0 / 16%);--ring:oklch(0.9 0.2 125);--surface:oklch(0.19 0.047 265);--destructive:oklch(0.7 0.19 27);--chart-1:oklch(0.9 0.2 125);--chart-2:oklch(0.76 0.15 30);--chart-3:oklch(0.74 0.17 300);--chart-4:oklch(0.8 0.12 200);--chart-5:oklch(0.86 0.13 85);--pocket-navy:oklch(0.12 0.045 265)} body:not(:has([data-gallery])):has(.pocket-theme){font-family:var(--pocket-sans),ui-sans-serif,system-ui,sans-serif} @keyframes pocket-bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-8px) rotate(var(--r,0deg))}} .pocket-bob{animation:pocket-bob 5s ease-in-out infinite;animation-play-state:var(--bm-ambient-state,running)} @media (prefers-reduced-motion:reduce){.pocket-bob{animation:none}} ` const display = "font-black tracking-[-0.035em]" const onLime = "text-[var(--pocket-on-lime)]" const txTone = ["bg-chart-1", "bg-chart-5", "bg-chart-4", "bg-chart-2", "bg-chart-3"] /** The Pocket app inside a phone: balance, quick actions and three tabs (Home, Card, Save). Tap around. */ function PocketApp({ className, defaultTab = "home" }: { className?: string; defaultTab?: "home" | "card" | "save" }) { const [tab, setTab] = React.useState<"home" | "card" | "save">(defaultTab) const [frozen, setFrozen] = React.useState(false) const id = React.useId() const tabs = [["home", "Home", HomeIcon], ["card", "Card", CreditCard], ["save", "Save", PiggyBank]] as const return (

Good morning

Maya

{tab === "home" && ( <>

Total balance

$12,480.62

+$212.40 this week

{[["Send", Send], ["Request", Apple], ["Top up", QrCode], ["More", Play]].map(([l, Icon]) => { const I = Icon as typeof Send; return
{l as string}
})}

Recent

    {transactions.slice(0, 4).map((t) =>
  • {t.name}{t.detail} 0 && "text-primary")}>{t.amount > 0 ? "+" : ""}{money(t.amount)}
    • )}
)} {tab === "card" && ( <>
) } /** App Store and Google Play buttons that go to the download page. */ function StoreButtons({ href, className }: { href: string; className?: string }) { const b = "bg-[var(--pocket-navy)] text-[var(--pocket-on-navy)] focus-visible:ring-ring inline-flex h-14 items-center gap-3 rounded-2xl px-5 outline-none transition-transform hover:translate-y-[var(--bm-lift,-2px)] focus-visible:ring-[3px] motion-reduce:transition-none motion-reduce:hover:translate-y-0" return ( ) } const links: { key: PocketPage; label: string }[] = [{ key: "features", label: "Features" }, { key: "pricing", label: "Pricing" }, { key: "security", label: "Security" }] type PocketShellProps = React.ComponentProps<"div"> & { /** The page being shown, so its nav link is marked current. */ page: PocketPage /** Override where pages live (used by previews). */ hrefs?: Partial } /** Pocket's frame: a floating pill header, and a navy footer with a giant wordmark. */ function PocketShell({ page, hrefs: overrides, className, style, children, ...props }: PocketShellProps) { const hrefs = { ...defaultHrefs, ...overrides } const [open, setOpen] = React.useState(false) React.useEffect(() => { const classes = [pocketSans.variable].filter(Boolean) document.body.classList.add(...classes) return () => document.body.classList.remove(...classes) }, []) return (
pocket
Get the app
{open && }
{children}

Money that keeps up with you.

{[["Product", [["Features", hrefs.features], ["Pricing", hrefs.pricing], ["Download", hrefs.download]]], ["Trust", [["Security", hrefs.security], ["Status", hrefs.security], ["Bug bounty", hrefs.security]]], ["Company", [["About", hrefs.home], ["Careers", hrefs.home], ["Press", hrefs.home]]]].map(([t, items]) =>

{t as string}

    {(items as string[][]).map(([l, h]) =>
  • {l}
    • )}
)}

Pocket is a financial technology company, not a bank. Banking services by Harbor Bank, N.A., Member FDIC. © 2026 Pocket Labs.

) } export { PocketApp, PocketShell, StoreButtons, defaultHrefs as pocketDefaultHrefs, display as pocketDisplayClass, onLime as pocketOnLime, type PocketHrefs, type PocketPage, type PocketShellProps } ``` ### `registry/ballmac/components/templates/pocket/pocket-home.tsx` ```tsx // Ballmac UI: Pocket home page. https://ui.ballmac.com/templates/template-pocket "use client" import * as React from "react" import { ArrowRight, Globe2, PiggyBank, ShieldCheck, Snowflake, Users } from "lucide-react" import { PocketApp, PocketShell, StoreButtons, pocketDisplayClass, type PocketHrefs } from "@/components/ballmac/templates/pocket/pocket-theme" import { cn } from "@/lib/utils" const cards = [ { icon: PiggyBank, title: "Round-ups that add up", body: "Every purchase rounds up to the next dollar and the change lands in a pot. Most people save $40 a month without noticing.", tone: "bg-chart-1" }, { icon: Snowflake, title: "Freeze it in one tap", body: "Lost your card? Tap once and every payment stops. Tap again and you are back.", tone: "bg-chart-4" }, { icon: Globe2, title: "Spend anywhere", body: "Pay in 40 currencies at the real exchange rate with no fee. The rate you see is the rate you get.", tone: "bg-chart-5" }, { icon: Users, title: "Split without the awkward", body: "Send a request for your share of dinner, with a gentle reminder so you do not have to be the one who asks.", tone: "bg-chart-2" }, ] const reviews = [ ["It’s the first money app I open on purpose.", "Priya N.", "App Store"], ["Round-ups paid for our entire holiday. I did nothing.", "Tom & Lucia", "Google Play"], ["Froze my card from a taxi in Lisbon. Unfroze it at the hotel.", "Dev R.", "App Store"], ] type PocketHomeProps = React.ComponentProps<"div"> & { hrefs?: Partial } /** The Pocket home page: a hero with a working app in a phone, four feature blocks, proof and the download buttons. */ function PocketHome({ hrefs, ...props }: PocketHomeProps) { const link = { features: "/pocket/features", pricing: "/pocket/pricing", download: "/pocket/download", security: "/pocket/security", ...hrefs } return (
As seen in{["The Daily Ledger", "Fast Money", "Wired Weekly", "Product Hunt"].map((n) => {n})}

Everything your money app should have done years ago.

    {cards.map((c) =>
    • )}
See every feature
    {[["$0", "to open, hold or close an account"], ["40", "currencies at the real rate"], ["11 min", "average wait for a human reply"]].map(([n, l]) =>
  • {n}{l}
    • )}

People say nice things

    {reviews.map(([q, n, s], i) =>

  • “{q}”

    {n} · {s}

    • )}

Open an account in about four minutes.

All you need is your phone and a photo ID. We will do the rest.

 ) } export { PocketHome, type PocketHomeProps } ``` ### `registry/ballmac/components/templates/pocket/pocket-features.tsx` ```tsx // Ballmac UI: Pocket features page. https://ui.ballmac.com/templates/template-pocket "use client" import * as React from "react" import { Send, Snowflake } from "lucide-react" import { Slider } from "@/components/ballmac/slider" import { Switch } from "@/components/ballmac/switch" import { currencies, money } from "@/components/ballmac/templates/pocket/pocket-data" import { PocketShell, pocketDisplayClass, type PocketHrefs } from "@/components/ballmac/templates/pocket/pocket-theme" import { cn } from "@/lib/utils" const bars = [["Food", 340, "bg-chart-1"], ["Travel", 215, "bg-chart-4"], ["Fun", 180, "bg-chart-5"], ["Home", 120, "bg-chart-2"]] as const const people = [["Sam", "bg-chart-1", true], ["Ana", "bg-chart-4", true], ["Joe", "bg-chart-5", false], ["Mei", "bg-chart-2", false]] as const type PocketFeaturesProps = React.ComponentProps<"div"> & { hrefs?: Partial } /** The features page: five live demos instead of five screenshots. Freeze a card, tune round-ups, split a bill, convert money. */ function PocketFeatures({ hrefs, ...props }: PocketFeaturesProps) { const [frozen, setFrozen] = React.useState(false) const [spend, setSpend] = React.useState(900) const [paid, setPaid] = React.useState(["Sam", "Ana"]) const [amount, setAmount] = React.useState("100") const [cur, setCur] = React.useState<(typeof currencies)[number][0]>("EUR") const savedPerMonth = Math.round(spend * 0.045) const rate = currencies.find((c) => c[0] === cur)! const converted = (Number(amount) || 0) * rate[1] const bill = 128 const share = bill / people.length const total = bars.reduce((n, b) => n + b[1], 0) const card = "rounded-[2rem] border p-8 sm:p-10" return (

Try it right here.

Everything below works. Freeze the card, drag the slider, split the bill.

Freeze it in one tap

Lost it? Misplaced it? Stop every payment instantly, then undo it when you find it in a coat.

pocket

•••• •••• •••• 4821

{frozen && }

{frozen ? "Payments are off. Nothing can be charged." : "Your card is live."}

Round-ups, calculated

Tell us roughly what you spend on your card each month.

Monthly card spending{money(spend, 0)}

setSpend(v[0]!)} className="mt-4 [&_[data-slot=slider-track]]:bg-black/20 [&_[data-slot=slider-range]]:bg-[var(--pocket-ink)] [&_[data-slot=slider-thumb]]:border-[var(--pocket-ink)] [&_[data-slot=slider-thumb]]:bg-white" />

You would save about

{money(savedPerMonth, 0)}

a month · {money(savedPerMonth * 12, 0)} a year

Where it went

{money(total, 0)} in August

    {bars.map(([n, v, c]) =>
  • {n}{money(v, 0)}
    • )}

Split the bill

Dinner, {money(bill, 0)} · {money(share, 0)} each

    {people.map(([n, c]) => { const isPaid = paid.includes(n); return
  • {n}{isPaid ? Paid : }
    • })}

{paid.length === people.length ? "Everyone has paid." : `${people.length - paid.length} still to pay.`}

Real exchange rate

No fee, no markup.

setAmount(e.target.value.replace(/[^\d.]/g, ""))} className="h-12 rounded-2xl border-2 border-[var(--pocket-ink)] bg-white/60 px-4 text-lg font-extrabold tabular-nums outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--pocket-ink)]/40" />
{currencies.slice(1).map(([c]) => )}

They receive

{rate[2]}{converted.toLocaleString("en-US", { maximumFractionDigits: cur === "JPY" ? 0 : 2, minimumFractionDigits: cur === "JPY" ? 0 : 2 })}

1 USD = {rate[1]} {cur}

 ) } export { PocketFeatures, type PocketFeaturesProps } ``` ### `registry/ballmac/components/templates/pocket/pocket-pricing.tsx` ```tsx // Ballmac UI: Pocket pricing page. https://ui.ballmac.com/templates/template-pocket "use client" import * as React from "react" import { Check, Minus } from "lucide-react" import { compare, faqs, plans } from "@/components/ballmac/templates/pocket/pocket-data" import { PocketShell, pocketDisplayClass, type PocketHrefs } from "@/components/ballmac/templates/pocket/pocket-theme" import { cn } from "@/lib/utils" type PocketPricingProps = React.ComponentProps<"div"> & { hrefs?: Partial } /** Pricing: a monthly or yearly switch, three plans, a real comparison table and the questions people ask. */ function PocketPricing({ hrefs, ...props }: PocketPricingProps) { const link = { download: "/pocket/download", ...hrefs } const [yearly, setYearly] = React.useState(true) const cell = (v: string | boolean) => (v === true ? <>