# iOS Settings

> Grouped lists, colored icons, switches, Wi-Fi and Display sub-pages with live search.

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

## Install

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

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

import * as React from "react"
import {
  Bell,
  Bluetooth,
  Check,
  Cog,
  Hourglass,
  Moon,
  Plane,
  Radio,
  Sun,
  SunMoon,
  Type,
  Wifi,
} from "lucide-react"

import { cn } from "@/lib/utils"
import {
  IOSBackButton,
  IOSDevice,
  IOSGroup,
  IOSPage,
  IOSRow,
  IOSSearchField,
  IOSSegmented,
  IOSSwitch,
} from "@/components/ios-kit"

type View = "root" | "wifi" | "display"

const networks = ["Atelier-5G", "Loft Guest", "Coffee & Co.", "Neighbor_2.4"]

export default function IOSSettings() {
  const [view, setView] = React.useState<View>("root")
  const [airplane, setAirplane] = React.useState(false)
  const [wifiOn, setWifiOn] = React.useState(true)
  const [network, setNetwork] = React.useState(networks[0])
  const [appearance, setAppearance] = React.useState(0)
  const [trueTone, setTrueTone] = React.useState(true)
  const [brightness, setBrightness] = React.useState(70)
  const [query, setQuery] = React.useState("")

  const q = query.trim().toLowerCase()
  const show = (label: string) => !q || label.toLowerCase().includes(q)

  if (view === "wifi") {
    return (
      <IOSDevice>
        <IOSPage title="Wi-Fi" large={false} left={<IOSBackButton label="Settings" onClick={() => setView("root")} />}>
          <IOSGroup className="mt-2">
            <IOSRow
              title="Wi-Fi"
              right={<IOSSwitch checked={wifiOn} onCheckedChange={setWifiOn} label="Wi-Fi" />}
            />
          </IOSGroup>
          {wifiOn && (
            <IOSGroup header="Networks">
              {networks.map((name) => (
                <IOSRow
                  key={name}
                  title={name}
                  onClick={() => setNetwork(name)}
                  leading={
                    <Check
                      className={cn("size-5 text-(color:--ios-blue)", network === name ? "opacity-100" : "opacity-0")}
                      strokeWidth={3}
                    />
                  }
                  detail={<Wifi className="size-5" />}
                />
              ))}
            </IOSGroup>
          )}
        </IOSPage>
      </IOSDevice>
    )
  }

  if (view === "display") {
    return (
      <IOSDevice>
        <IOSPage title="Display & Brightness" large={false} left={<IOSBackButton label="Settings" onClick={() => setView("root")} />}>
          <IOSGroup header="Appearance" className="mt-2">
            <div className="p-4">
              <IOSSegmented options={["Light", "Dark", "Auto"]} value={appearance} onValueChange={setAppearance} />
            </div>
          </IOSGroup>
          <IOSGroup header="Brightness">
            <div className="flex items-center gap-3 px-4 py-4 text-(color:--ios-label2)">
              <Sun className="size-4" />
              <input
                type="range"
                min={0}
                max={100}
                value={brightness}
                onChange={(event) => setBrightness(Number(event.target.value))}
                aria-label="Brightness"
                className="h-1 min-w-0 flex-1 accent-(color:--ios-blue)"
              />
              <Sun className="size-6" />
            </div>
            <IOSRow
              title="True Tone"
              right={<IOSSwitch checked={trueTone} onCheckedChange={setTrueTone} label="True Tone" />}
            />
          </IOSGroup>
          <IOSGroup footer="Text size and bold text are in Accessibility.">
            <IOSRow title="Text Size" icon={<Type />} iconClassName="bg-(color:--ios-blue)" chevron />
          </IOSGroup>
        </IOSPage>
      </IOSDevice>
    )
  }

  return (
    <IOSDevice>
      <IOSPage title="Settings">
        <div className="mb-4 px-4">
          <IOSSearchField value={query} onChange={(event) => setQuery(event.target.value)} />
        </div>

        {!q && (
          <IOSGroup>
            <IOSRow
              onClick={() => {}}
              leading={
                <span className="flex size-16 shrink-0 items-center justify-center rounded-full bg-gradient-to-b from-zinc-400 to-zinc-600 text-[24px] font-medium text-white">
                  AL
                </span>
              }
              title={<span className="text-[20px]">Alex Lin</span>}
              subtitle="Apple ID, iCloud, Media & Purchases"
              chevron
            />
          </IOSGroup>
        )}

        <IOSGroup>
          {show("Airplane Mode") && (
            <IOSRow
              icon={<Plane />}
              iconClassName="bg-(color:--ios-orange)"
              title="Airplane Mode"
              right={<IOSSwitch checked={airplane} onCheckedChange={setAirplane} label="Airplane Mode" />}
            />
          )}
          {show("Wi-Fi") && (
            <IOSRow
              icon={<Wifi />}
              title="Wi-Fi"
              detail={airplane || !wifiOn ? "Off" : network}
              chevron
              onClick={() => setView("wifi")}
            />
          )}
          {show("Bluetooth") && <IOSRow icon={<Bluetooth />} title="Bluetooth" detail="On" chevron onClick={() => {}} />}
          {show("Cellular") && (
            <IOSRow icon={<Radio />} iconClassName="bg-(color:--ios-green)" title="Cellular" chevron onClick={() => {}} />
          )}
        </IOSGroup>

        <IOSGroup>
          {show("Notifications") && (
            <IOSRow icon={<Bell />} iconClassName="bg-(color:--ios-red)" title="Notifications" chevron onClick={() => {}} />
          )}
          {show("Focus") && (
            <IOSRow icon={<Moon />} iconClassName="bg-(color:--ios-indigo)" title="Focus" chevron onClick={() => {}} />
          )}
          {show("Screen Time") && (
            <IOSRow icon={<Hourglass />} iconClassName="bg-(color:--ios-indigo)" title="Screen Time" chevron onClick={() => {}} />
          )}
        </IOSGroup>

        <IOSGroup>
          {show("General") && (
            <IOSRow icon={<Cog />} iconClassName="bg-zinc-500" title="General" chevron onClick={() => {}} />
          )}
          {show("Display & Brightness") && (
            <IOSRow
              icon={<SunMoon />}
              title="Display & Brightness"
              chevron
              onClick={() => setView("display")}
            />
          )}
        </IOSGroup>
      </IOSPage>
    </IOSDevice>
  )
}
```