npm package: @makemore/mobile-design-system
Description: iOS-style mobile UI components for Next.js + shadcn/ui + Tailwind. Drop-in native mobile prototyping kit.
Latest version: 0.1.1

# @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

```bash
# 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

```tsx
"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