# iOS Lock Screen

> Large clock, stacked notifications, flashlight and camera shortcuts.

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

## Install

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

Adds the page at `app/ios-lock-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-lock-screen/page.tsx"
"use client"

import * as React from "react"
import { Camera, Flashlight, Lock, MessageCircle, X } from "lucide-react"

import { cn } from "@/lib/utils"
import { IOSDevice } from "@/components/ios-kit"

type Notice = { id: number; app: string; title: string; body: string; time: string; tint: string }

const initial: Notice[] = [
  { id: 1, app: "Messages", title: "Mia Chen", body: "Are we still on for dinner? I booked the 7:30 table.", time: "now", tint: "bg-green-500" },
  { id: 2, app: "Calendar", title: "Design review", body: "Starts in 15 minutes · Room 4B", time: "9:26", tint: "bg-red-500" },
  { id: 3, app: "Weather", title: "Rain expected", body: "Light rain starting around 6 PM.", time: "8:02", tint: "bg-sky-500" },
]

export default function IOSLockScreen() {
  const [notices, setNotices] = React.useState(initial)
  const [torch, setTorch] = React.useState(false)

  return (
    <IOSDevice light className="bg-black">
      <div
        aria-hidden
        className="absolute inset-0 bg-[radial-gradient(90%_55%_at_80%_10%,#ff9a62_0%,transparent_60%),radial-gradient(100%_60%_at_0%_45%,#7b4dff_0%,transparent_60%),radial-gradient(120%_60%_at_60%_100%,#0f7bff_0%,transparent_65%),linear-gradient(#1a1230,#0b1230)]"
      />

      <div className="relative flex min-h-0 flex-1 flex-col items-center px-4 pt-[64px] text-white">
        <Lock className="size-5 opacity-90" strokeWidth={2.4} />
        <p className="mt-2 text-[20px] font-medium opacity-90">Thursday, November 12</p>
        <p className="-mt-1 text-[92px] leading-[100px] font-semibold tracking-tight tabular-nums [text-shadow:0_2px_30px_rgb(0_0_0/0.15)]">
          9:41
        </p>

        <ul className="mt-auto flex w-full flex-col gap-2 pb-4" aria-label="Notifications">
          {notices.map((notice) => (
            <li
              key={notice.id}
              className="group flex items-start gap-3 rounded-[22px] bg-white/25 p-3.5 backdrop-blur-2xl animate-in fade-in slide-in-from-bottom-2"
            >
              <span className={cn("flex size-10 shrink-0 items-center justify-center rounded-[10px]", notice.tint)}>
                <MessageCircle className="size-6" />
              </span>
              <div className="min-w-0 flex-1 text-[15px] leading-[19px]">
                <div className="flex items-baseline justify-between gap-2">
                  <p className="truncate font-semibold">{notice.title}</p>
                  <span className="shrink-0 text-[13px] opacity-70">{notice.time}</span>
                </div>
                <p className="line-clamp-2 opacity-90">{notice.body}</p>
              </div>
              <button
                type="button"
                aria-label={`Dismiss ${notice.app} notification`}
                onClick={() => setNotices((list) => list.filter((n) => n.id !== notice.id))}
                className="flex size-6 shrink-0 items-center justify-center rounded-full bg-black/25 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 max-sm:opacity-100"
              >
                <X className="size-3.5" />
              </button>
            </li>
          ))}
        </ul>

        <div className="flex w-full items-center justify-between px-6 pt-1 pb-[62px]">
          <button
            type="button"
            aria-label="Flashlight"
            aria-pressed={torch}
            onClick={() => setTorch((on) => !on)}
            className={cn(
              "flex size-[50px] items-center justify-center rounded-full backdrop-blur-2xl transition-[background-color,color,transform] active:scale-90",
              torch ? "bg-white text-black" : "bg-black/35 text-white"
            )}
          >
            <Flashlight className="size-6" fill={torch ? "currentColor" : "none"} />
          </button>
          <p className="text-[13px] opacity-70">Swipe up to unlock</p>
          <button
            type="button"
            aria-label="Camera"
            className="flex size-[50px] items-center justify-center rounded-full bg-black/35 backdrop-blur-2xl transition-transform active:scale-90"
          >
            <Camera className="size-6" />
          </button>
        </div>
      </div>
    </IOSDevice>
  )
}
```