@makemore/mobile-design-system

iOS-style mobile UI components for Next.js + shadcn/ui + Tailwind CSS.

Build native-feeling mobile prototypes in the browser. On desktop you get a centred phone frame with notch and home indicator; on mobile it goes full-screen automatically.

Quick Start

# Add components to your Next.js project
npx @makemore/mobile-design-system init

# Or include the interactive demo page too
npx @makemore/mobile-design-system init --demo

Components are copied into src/components/mobile/ (source files, not compiled — fully yours to customise).

Prerequisites

| Requirement | Why | |---|---| | Next.js 14+ | App Router, "use client" directives | | Tailwind CSS 3+ | All styling | | shadcn/ui initialised | Uses @/lib/utils (cn helper) and CSS variable theming | | lucide-react | Icons used by StatusBar, NavigationBar, MobileListItem |

Components

Layout

| Component | Description | |---|---| | MobileShell | Phone-sized container on desktop, full-screen on mobile. Wrap your whole page. | | StatusBar | Fake iOS status bar (time, signal, wifi, battery) | | NavigationBar | Top nav with back button, title (standard or large), and right action slot | | TabBar | Bottom tab bar with icons and labels | | PageContent | Scrollable content area with iOS momentum scrolling |

UI

| Component | Description | |---|---| | MobileListGroup | iOS Settings-style grouped list section with optional header/footer | | MobileListItem | List row with icon, label, detail, chevron, or custom right element | | MobileSearchBar | Rounded search input | | SegmentedControl | Pill-style toggle (like iOS UISegmentedControl) | | MobileSpinner | Activity indicator | | MobileProgressBar | Thin progress bar | | MobileEmptyState | Centred placeholder for empty views |

Overlays

| Component | Description | |---|---| | MobileActionSheet | Slides up from bottom with action buttons + cancel | | MobileActionSheetItem | Individual action row (supports destructive style) | | MobileBottomSheet | Half/full-sheet modal with drag handle and done button |

Usage

"use client";

import {
  MobileShell,
  StatusBar,
  NavigationBar,
  TabBar,
  PageContent,
  MobileListGroup,
  MobileListItem,
} from "@/components/mobile";
import { Home, Settings, Wifi, Bluetooth } from "lucide-react";
import { Switch } from "@/components/ui/switch";

export default function MyPage() {
  const [activeTab, setActiveTab] = useState("home");

  return (
    <MobileShell>
      <StatusBar />
      <NavigationBar title="Settings" largeTitle />
      <PageContent>
        <MobileListGroup header="Network">
          <MobileListItem
            label="Wi-Fi"
            detail="Home"
            icon={<Wifi className="h-4 w-4" />}
            chevron
            onClick={() => {}}
          />
          <MobileListItem
            label="Bluetooth"
            icon={<Bluetooth className="h-4 w-4" />}
            rightElement={<Switch />}
          />
        </MobileListGroup>
      </PageContent>
      <TabBar
        items={[
          { id: "home", label: "Home", icon: <Home className="h-5 w-5" /> },
          { id: "settings", label: "Settings", icon: <Settings className="h-5 w-5" /> },
        ]}
        activeId={activeTab}
        onSelect={setActiveTab}
      />
    </MobileShell>
  );
}

Demo

Run npx @makemore/mobile-design-system init --demo, start your dev server, and visit:

http://localhost:3000/mobile-design-system

The demo page showcases every component across four tabs: Home (components overview), Forms, Feedback, and Settings.

Customisation

Everything uses shadcn's CSS variable theming, so your existing theme applies automatically. The source files live in your project — edit colours, spacing, typography, or add new components directly.

License

MIT