@saas-factory/ui-mobile

A mobile-first design system optimized for app-like experiences. Built with touch interactions, large tap targets, card-based layouts, and full-screen components. Perfect for mobile web apps, PWAs, and mobile-heavy SaaS products.

Design Philosophy

• Mobile-First: Designed for touch from the ground up
• Card-Based: Stacked card layouts for readability
• Touch-Friendly: Large tap targets (48px+)
• Full-Screen: Components expand to viewport
• Minimal Scrolling: Lazy loading and pagination
• Gesture Support: Swipe, tap, long-press actions

Key Features

✅ Touch-Optimized components (48px+ tap targets) ✅ Swipe Gestures (navigation, dismissal) ✅ Bottom Sheets (mobile-friendly modals) ✅ Mobile Navigation (bottom tabs, hamburger) ✅ Fullscreen Cards (content cards) ✅ Pull-to-Refresh (familiar mobile pattern) ✅ Infinite Scroll (performant pagination) ✅ Safe Area Support (notches, home indicators) ✅ Progressive Enhancement (works offline) ✅ Mobile Optimized images and assets

Installation

npm install @saas-factory/ui-mobile

Quick Start

import { MobileProvider, MobileApp, Card } from '@saas-factory/ui-mobile';

export default function App() {
  return (
    <MobileProvider>
      <MobileApp>
        <Card>
          <Card.Header>Title</Card.Header>
          <Card.Body>Content</Card.Body>
        </Card>
      </MobileApp>
    </MobileProvider>
  );
}

Mobile Components

Navigation

• BottomNavigation - Tab bar at bottom
• Hamburger Menu - Slide-out drawer
• Breadcrumbs - Mobile-friendly navigation
• Tabs - Horizontal scrolling tabs

Content

• Card - Full-width card component
• FullScreenModal - Full-screen overlay
• BottomSheet - Slide up from bottom
• Sticky Header - Sticky top navigation

Forms

• MobileInput - Large, touch-friendly input
• SelectMenu - Native select on mobile
• CheckboxGroup - Touch-friendly options
• Slider - Range selection

Interactions

• SwipeActions - Swipe to delete/edit
• PullToRefresh - Pull down to reload
• LongPress - Long-press actions
• Haptic Feedback - Vibration feedback (native)

Templates

• App Shell - Basic app structure
• E-Commerce App - Shopping experience
• Chat App - Messaging interface
• Social Feed - Social media feed
• Banking App - Financial app pattern

Safe Area Handling

Automatically handles device notches, home indicators:

<SafeAreaProvider>
  <YourApp />
</SafeAreaProvider>

Performance

• Virtualized lists (infinite scroll)
• Image lazy loading
• CSS-in-JS with CSS variables
• Minimal JavaScript

Device Support

• iOS Safari (14+)
• Android Chrome
• Samsung Internet
• Modern mobile browsers

PWA Ready

Includes service worker support for offline-first apps.

License

MIT