@m1kapp/ui

Mobile-first app shell for side projects. Build apps that feel native — in minutes.

┌─────────────────────┐
│ Header (sticky)     │  ← AppShellHeader
├─────────────────────┤
│                     │
│ Content (scroll)    │  ← AppShellContent
│                     │
├─────────────────────┤
│ TabBar (sticky)     │  ← TabBar + Tab
└─────────────────────┘
   rounded · shadow · floating on color
          ↑
       Watermark (full-screen colored bg)

Install

npm install @m1kapp/ui

Requirements: React 18+, Tailwind CSS 4+

Add the font (optional but recommended):

<!-- index.html -->
<link rel="stylesheet" href="https://static.toss.im/dist/tps.css" />

// main.tsx
import { fontFamily } from "@m1kapp/ui";
document.body.style.fontFamily = fontFamily.toss;

Quick Start

import { useState } from "react";
import {
  Watermark, AppShell, AppShellHeader, AppShellContent,
  TabBar, Tab, Section, StatChip, ThemeButton, ThemeDialog,
  colors,
} from "@m1kapp/ui";

export default function App() {
  const [tab, setTab] = useState("home");
  const [themeColor, setThemeColor] = useState(colors.blue);
  const [themeOpen, setThemeOpen] = useState(false);
  const [dark, setDark] = useState(false);

  return (
    <>
      <Watermark color={themeColor} text="myapp">
        <AppShell>
          <AppShellHeader>
            <span className="text-xl font-black">myapp</span>
            <ThemeButton
              color={themeColor}
              dark={dark}
              onClick={() => setThemeOpen(true)}
            />
          </AppShellHeader>

          <AppShellContent>
            <Section>
              <StatChip label="Users" value={128} />
            </Section>
          </AppShellContent>

          <TabBar>
            <Tab
              active={tab === "home"}
              onClick={() => setTab("home")}
              label="Home"
              activeColor={themeColor}
              icon={<HomeIcon />}
            />
          </TabBar>
        </AppShell>
      </Watermark>

      <ThemeDialog
        open={themeOpen}
        onClose={() => setThemeOpen(false)}
        current={themeColor}
        onSelect={setThemeColor}
        dark={dark}
        onDarkToggle={() => {
          setDark((v) => !v);
          document.documentElement.classList.toggle("dark");
        }}
      />
    </>
  );
}

Components

Watermark

Full-screen colored background with a repeating text pattern. The "floating app" aesthetic.

<Watermark
  color="#3b82f6"       // background color
  text="myapp"          // repeating watermark text
  speed={20}            // animation speed in seconds. 0 = static
  sponsor={{ name: "@m1kapp/ui", url: "https://github.com/m1kapp/ui" }}
>
  <AppShell>...</AppShell>
</Watermark>

| Prop | Type | Default | Description | |------|------|---------|-------------| | color | string | #0f172a | Background color | | text | string | "m1k" | Watermark pattern text | | maxWidth | number | 430 | Max width of content area | | padding | number | 12 | Padding around the shell (px) | | speed | number | 20 | Drift animation speed (s). 0 = no animation | | sponsor | WatermarkSponsor | — | 1k milestone sponsor — name shown interleaved with watermark text; entire bg becomes a link |

interface WatermarkSponsor {
  name: string; // shown in background
  url: string;  // entire background becomes a clickable link
}

AppShell

Mobile app container — rounded corners, drop shadow, ring. Centers within Watermark.

<AppShell maxWidth={430}>
  <AppShellHeader>...</AppShellHeader>
  <AppShellContent>...</AppShellContent>
  <TabBar>...</TabBar>
</AppShell>

| Prop | Type | Default | |------|------|---------| | maxWidth | number | 430 | | className | string | — | | style | CSSProperties | — |

AppShellHeader

Sticky top bar (h-14) with blur backdrop.

<AppShellHeader>
  <span className="font-black">myapp</span>
  <ThemeButton color={themeColor} dark={dark} onClick={...} />
</AppShellHeader>

AppShellContent

Scrollable area between header and tab bar.

<AppShellContent>
  <Section>...</Section>
  <Divider />
  <Section>...</Section>
</AppShellContent>

TabBar + Tab

Sticky bottom nav (h-16) with active color support.

<TabBar>
  <Tab
    active={tab === "home"}
    onClick={() => setTab("home")}
    label="Home"
    icon={<HomeIcon />}
    activeColor={themeColor}   // optional, defaults to current text color
  />
</TabBar>

| Prop | Type | Description | |------|------|-------------| | active | boolean | Selected state | | onClick | () => void | — | | icon | ReactNode | Icon element | | label | string | Label below icon | | activeColor | string? | Color when active |

ThemeButton

Single circular button split diagonally — half light/dark indicator, half theme color dot. Put it in the header.

<ThemeButton
  color={themeColor}   // theme color (bottom-right half)
  dark={dark}          // light mode = white half, dark mode = black half
  onClick={() => setThemeOpen(true)}
/>

ThemeDialog

Bottom-sheet color picker + dark/light mode toggle.

<ThemeDialog
  open={themeOpen}
  onClose={() => setThemeOpen(false)}
  current={themeColor}
  onSelect={(color) => setThemeColor(color)}
  dark={dark}
  onDarkToggle={() => {
    setDark((v) => !v);
    document.documentElement.classList.toggle("dark");
  }}
/>

| Prop | Type | Description | |------|------|-------------| | open | boolean | Show/hide | | onClose | () => void | Called on backdrop click or Escape | | current | string | Currently selected color | | onSelect | (color: string) => void | Called when a color is picked (closes dialog) | | dark | boolean? | Current dark mode state | | onDarkToggle | () => void? | Called when light/dark is toggled | | palette | Record<string, string>? | Override color palette (default: built-in colors) |

Section + SectionHeader

<Section className="pt-5">
  <SectionHeader>Stats</SectionHeader>
  <p>Content with px-4 padding applied.</p>
</Section>

Divider

<Divider />

StatChip

Compact label + number display.

<div className="flex gap-3">
  <StatChip label="Users" value={1024} />
  <StatChip label="Revenue" value={9800} />
</div>

EmptyState

<EmptyState message="Nothing here yet" />

// Custom icon:
<EmptyState message="No results" icon={<SearchIcon />} />

Typewriter

Human-like typing effect with a blinking cursor.

<Typewriter
  words={["side project", "weekend build", "바이브코딩"]}
  color={themeColor}
  speed={80}        // ms per character
  pause={2000}      // ms between words
/>

colors

Curated palette. Use with Watermark, Tab, and ThemeDialog.

import { colors } from "@m1kapp/ui";

colors.blue    // #3b82f6
colors.purple  // #8b5cf6
colors.green   // #10b981
colors.orange  // #f97316
colors.pink    // #ec4899
colors.red     // #ef4444
colors.yellow  // #eab308
colors.cyan    // #06b6d4
colors.slate   // #0f172a
colors.zinc    // #27272a

fonts + fontFamily

CDN font references — no files bundled.

import { fonts, fontFamily } from "@m1kapp/ui";

// In HTML:
// <link rel="stylesheet" href={fonts.toss} />

// In JS:
document.body.style.fontFamily = fontFamily.toss;

// Available:
fonts.toss        // Toss Product Sans
fonts.pretendard  // Pretendard Variable
fonts.inter       // Inter

Dark Mode

Uses Tailwind's class-based dark mode. Add this to your CSS:

/* index.css */
@custom-variant dark (&:where(.dark, .dark *));

Then toggle with:

document.documentElement.classList.toggle("dark", isDark);

Philosophy

In the AI era, a side project takes a day to build.
But making it feel like an app still takes effort.

@m1kapp/ui gives you the shell — header, scrollable content, bottom tabs, floating on a colored background — so you can focus on the idea.

Built and battle-tested at m1k.app.

License

MIT