# iOS Home Screen

> App icon grid, widgets, a dock and page dots.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/templates/ios-home-screen
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/ios-home-screen.json
```

Adds the page at `app/ios-home-screen/page.tsx` together with the components below. Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Components

- [iOS Kit](https://chromotion.dev/r/ios-kit.md): `@/components/ios-kit`

## Dependencies

```bash
npm install lucide-react
```

## Source

```tsx title="app/ios-home-screen/page.tsx"
"use client"

import * as React from "react"
import {
  Calculator,
  Camera,
  CloudSun,
  Compass,
  Headphones,
  Heart,
  Image as ImageIcon,
  Map,
  MessageCircle,
  Music,
  Phone,
  Search,
  Settings,
  ShoppingBag,
  StickyNote,
  Wallet,
} from "lucide-react"

import { IOSAppIcon, IOSDevice } from "@/components/ios-kit"

const apps = [
  { label: "Messages", icon: MessageCircle, bg: "bg-gradient-to-b from-green-400 to-green-600" },
  { label: "Maps", icon: Map, bg: "bg-gradient-to-br from-emerald-300 via-sky-400 to-blue-500" },
  { label: "Photos", icon: ImageIcon, bg: "bg-gradient-to-br from-pink-400 via-amber-300 to-sky-400" },
  { label: "Notes", icon: StickyNote, bg: "bg-gradient-to-b from-yellow-300 to-amber-400" },
  { label: "Wallet", icon: Wallet, bg: "bg-gradient-to-b from-zinc-700 to-black" },
  { label: "Health", icon: Heart, bg: "bg-gradient-to-b from-rose-400 to-pink-600" },
  { label: "Music", icon: Music, bg: "bg-gradient-to-b from-rose-500 to-red-600" },
  { label: "Podcasts", icon: Headphones, bg: "bg-gradient-to-b from-fuchsia-500 to-purple-700" },
  { label: "Calculator", icon: Calculator, bg: "bg-gradient-to-b from-zinc-600 to-zinc-800" },
  { label: "App Store", icon: ShoppingBag, bg: "bg-gradient-to-b from-sky-400 to-blue-600" },
  { label: "Weather", icon: CloudSun, bg: "bg-gradient-to-b from-sky-400 to-indigo-500" },
  { label: "Settings", icon: Settings, bg: "bg-gradient-to-b from-zinc-400 to-zinc-600" },
]

const dock = [
  { label: "Phone", icon: Phone, bg: "bg-gradient-to-b from-green-400 to-green-600" },
  { label: "Safari", icon: Compass, bg: "bg-gradient-to-b from-sky-300 to-blue-600" },
  { label: "Camera", icon: Camera, bg: "bg-gradient-to-b from-zinc-400 to-zinc-600" },
  { label: "Music", icon: Music, bg: "bg-gradient-to-b from-rose-500 to-red-600" },
]

const events = [
  { time: "10:00", title: "Design review", color: "bg-sky-400" },
  { time: "12:30", title: "Lunch with Mia", color: "bg-orange-400" },
]

export default function IOSHomeScreen() {
  const [opened, setOpened] = React.useState<string | null>(null)

  return (
    <IOSDevice light hideHomeIndicator={false} className="bg-[#1b1f4b]">
      <div
        aria-hidden
        className="absolute inset-0 bg-[radial-gradient(120%_70%_at_20%_0%,#7c5cff_0%,transparent_60%),radial-gradient(90%_60%_at_100%_40%,#ff6aa2_0%,transparent_60%),radial-gradient(100%_70%_at_0%_100%,#22d3ee_0%,transparent_55%)]"
      />

      <div className="relative flex min-h-0 flex-1 flex-col px-5 pt-[66px]">
        <div className="grid grid-cols-[1fr_2fr] gap-3">
          <div className="flex aspect-square flex-col justify-between rounded-[22px] bg-gradient-to-b from-sky-400 to-blue-600 p-3.5 text-white shadow-lg">
            <div>
              <p className="text-[13px] font-medium">San Francisco</p>
              <p className="text-[38px] leading-[42px] font-light">18°</p>
            </div>
            <div>
              <CloudSun className="size-5" />
              <p className="text-[12px] font-medium">Partly Cloudy</p>
              <p className="text-[12px] opacity-80">H:21° L:13°</p>
            </div>
          </div>
          <div className="flex flex-col rounded-[22px] bg-white/85 p-3.5 text-black shadow-lg backdrop-blur-xl">
            <p className="text-[11px] font-semibold tracking-wide text-red-500 uppercase">Thursday 12</p>
            <ul className="mt-2 flex flex-col gap-2.5">
              {events.map((event) => (
                <li key={event.title} className="flex items-center gap-2">
                  <span className={`h-8 w-1 rounded-full ${event.color}`} />
                  <span className="min-w-0">
                    <span className="block truncate text-[13px] leading-4 font-semibold">{event.title}</span>
                    <span className="block text-[11px] text-black/50">{event.time}</span>
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="mt-6 grid grid-cols-4 gap-y-5">
          {apps.map((app) => (
            <IOSAppIcon
              key={app.label}
              label={app.label}
              showLabel
              className={app.bg}
              icon={<app.icon className="size-8" strokeWidth={1.8} />}
              onClick={() => setOpened(app.label)}
            />
          ))}
        </div>

        <div className="mt-auto flex flex-col items-center gap-3 pb-3">
          <p
            aria-live="polite"
            className="h-5 text-[13px] font-medium text-white/90 [text-shadow:0_1px_3px_rgb(0_0_0/0.4)]"
          >
            {opened ? `Opening ${opened}…` : ""}
          </p>
          <div className="flex items-center gap-1.5">
            <Search className="size-3 text-white/80" />
            <span className="text-[13px] text-white/80">Search</span>
          </div>
          <div className="flex items-center gap-1.5" aria-hidden>
            <span className="size-[7px] rounded-full bg-white" />
            <span className="size-[7px] rounded-full bg-white/40" />
            <span className="size-[7px] rounded-full bg-white/40" />
          </div>
        </div>
      </div>

      <div className="relative mx-3 mb-6 flex justify-around rounded-[34px] bg-white/25 px-4 py-3.5 backdrop-blur-2xl">
        {dock.map((app) => (
          <IOSAppIcon
            key={app.label}
            label={app.label}
            className={app.bg}
            icon={<app.icon className="size-8" strokeWidth={1.8} />}
            onClick={() => setOpened(app.label)}
          />
        ))}
      </div>
    </IOSDevice>
  )
}
```