Skip to content
supastack
Browse documentation
MobileExpo

For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /docs/mobile/ui.md (or send Accept: text/markdown).

Native UI and theming

Screen primitives and shared view-models that mirror the web's design decisions.

Ask about this guide
Open in

Before you begin

Open your downloaded supastack project in Visual Studio Code using File → Open Folder, then choose Terminal → New Terminal. The repository root is the folder containing package.json, apps and packages. Run the command below there and leave its terminal open. If a command is not recognized, finish the tool installation guide before continuing.

Read the platform tutorial first. A server is the app process that answers browser or phone requests. Web reads apps/web/.env.local, Expo reads apps/mobile/.env.local, and database migration commands read root .env. The no-database /dashboard demonstration is separate from real /auth accounts, which need migrated Postgres. A phone or desktop-only checkout needs a separately running Web backend.

corepack pnpm --filter @supastack/mobile start

Setup and configuration

Screen primitives live in apps/mobile/src/ui — Screen, Card, Title, Detail, SectionLabel, ErrorText, AppButton — styled from apps/mobile/src/theme, so a visual decision made for the web maps onto the native chrome. In Appearance settings, the Match web app mode (apps/mobile/src/theme/synced.ts via GET/PUT /api/mobile/appearance) applies the signed-in user's synced web color pack from a local cache.

packages/ui-native carries the cross-platform view-model helpers: createEntitlementCard turns server entitlement state into a card's title, status, detail, action label, and accessibility label, so web and mobile render the same access decision.

apps/mobile/src/ui/screen.tsx exports:
  Screen, Card, H1, H2, Title, Detail,
  SectionLabel, ErrorText, AppButton

@supastack/ui-native → createEntitlementCard(input)
  → { title, status, detail, accessibilityLabel, action }

Implementation workflow

Compose screens from the shared primitives before writing new elements; match the theme module's tokens and density instead of hardcoding sizes and colors.

Keep product copy out of primitives — they render labels, not copy decisions. Carry accessibility labels through custom rows the way createEntitlementCard does.

Verification and troubleshooting

Verify a screen in light and dark, at the largest text size, with screen-reader labels, and on a small device. A component that truncates or clips at 200% text is not done.

Frequently asked questions

14 questions

What is supastack?

supastack is a modular foundation for building AI-powered SaaS products. It brings together common infrastructure so you can focus on product-specific features.

Does it support web and mobile?

Yes. supastack includes Next.js and Expo apps as starting points for web and mobile experiences.

What authentication is included?

Better Auth covers email OTP, magic-link, and social sign-in; email/password stays available at the API layer and through the Auth.js credentials engine for products that need it. Personal workspaces are provisioned with the account so product records stay scoped from day one.

How does it support AI?

supastack includes configurable multi-provider AI, usage tracking, budgets, and encrypted bring-your-own-key support.

How are subscriptions handled?

For products built on the kit, Stripe billing, subscriptions, and entitlements form the paid-access foundation. Provider secrets stay server-only.

Where does my product-specific code live?

Product-specific features remain in a separate codebase while the product configures and integrates supastack’s foundation modules.

How does supastack pricing work?

The kit is a one-time purchase with lifetime updates: One Platform at $249 (temporary launch price, $100 off the regular $349) — your pick of Next.js (Web), Expo (iOS & Android), or Tauri (macOS & Windows Desktop) — or the All Platforms Bundle at $499 (temporary launch price, $100 off the regular $599) with every platform and the full monorepo, plus $75 per extra developer seat. No kit subscription. Checkout on this site delivers your license key by email, with repository access via GitHub invite.

How do workspaces scope my data?

User-owned records are scoped by workspaceId. Identity, entitlements, AI usage, billing events, and audit entries stay inside the personal workspace boundary.

How do background jobs work?

Trigger.dev is the explicit job runtime. The JobRunner contract only promises enqueue, status, and cancel—workflow semantics stay Trigger.dev-specific and explicit.

How is email different from outreach?

Transactional email covers product workflows such as completion notices. Cold outreach and campaigns are product concerns outside this kit’s email module.

How do mobile purchases work?

Mobile includes native purchases and restore through RevenueCat, with access verified by your server. Configure the store accounts and complete device testing before release. Web billing remains separate.

Where do AI provider keys live?

Bring-your-own-key credentials are encrypted and stay server-only. Keys are redacted from logs; usage and budgets remain visible at the workspace level.

Which payment methods does checkout accept?

The Stripe-hosted checkout accepts cards and can also offer Alipay and WeChat Pay once those wallets are enabled on the Stripe account — handy for buyers in China. Wallet authorizations confirm asynchronously, so the license page updates as soon as the payment clears.

Can I get a refund?

After you've got access to the repository, supastack is yours forever, so it cannot be refunded. But rest assured, you get the complete source code with lifetime updates to build and ship unlimited products for yourself or clients. You just cannot resell the code or redistribute the repository as a starter kit or template.

EN
Theme