Overview

VibeFast's UI library spans the Expo/native app and the Next.js web app. Each side uses its own toolkit (Uniwind/Tailwind on mobile, Tailwind-cva on web), but they run off the same design tokens and shared component primitives so you get a consistent look and feel regardless of the platform.

Design tokens & theming

• Color tokens: apps/native/src/components/ui/colors.js is the single source for palettes such as primary, accent, background, and foreground. Uniwind maps those tokens into semantic bg-*/text-* utilities, and the Next.js styles import the same palette via the theme object inside apps/web/styles/globals.css or apps/web/components/ui/ helpers (see cn + class-variance-authority patterns).
• Spacing & typography: The useThemeConfig hook (apps/native/src/lib/use-theme-config.tsx) exposes typography, radii, and spacing values that you can pass into RN components or use in Next.js classes via the theme object from next-themes.
• Dark mode: Both apps read the same token names, so toggling dark mode (exported via ThemeProvider and next-themes on the web) yields identical colors for bg-primary/text-foreground across devices.

Uniwind + Tailwind setup

• Mobile components rely on apps/native/tailwind.config.js, which loads the color tokens and custom utilities. You simply use className="bg-primary-500 px-4 py-3" and Uniwind resolves the values.
• Web components use class-variance-authority (cva) helpers (see apps/web/components/ui/button.tsx) plus the cn utility (apps/web/lib/utils.ts). Utility classes like bg-primary text-primary-foreground mirror the mobile names, so design updates flow both places.

Component organization

• Core components: Located under apps/native/src/components/ui and apps/web/components/ui. They include buttons, inputs, cards, floaters, dialogs, toasts, etc. Both folders expose variant-friendly APIs (size/variant props, asChild, etc.).
• Advanced components: More complex screens live under apps/native/src/components/advanced-ui (steppers, multi-column layouts) and apps/web/components (dashboards, layouts, admin widgets) and reuse the same primitives.
• Primitive helpers: Shared helpers such as Button/Input/Select on Native and Button/Input on web follow the same props and semantics, so migrating a card from mobile to web mostly means reusing tokens rather than rewriting styles.