suiss/uim · Block

Settings Account

An account settings screen with a profile header, a section list and an editable sign-in and security page.

Settings Account is an open-source mobile screen from suiss/uim for React Native and Expo, with SwiftUI and Jetpack Compose versions built from the same design tokens. The @esuiss/uim CLI copies its source into your project, so you own the code.

iOS
Settings Account on iOS in light mode

The main page shows an Avatar and name above an inset ItemGroup of account sections; tapping one pushes it into the same Header with a back button. The Sign-In & Security page has cards for email and phone that open an inline Input with Save and Cancel, a passkeys Switch, and a confirmation that appears after saving. Other sections show a placeholder.

Installation

$ pnpm dlx @esuiss/uim@latest add settings-account

The CLI also adds what it builds on: Avatar, Button, Header, Icon, Input, Item, Screen, Switch, Text.

Manual

  1. Install the dependencies:
npx expo install cn phosphor-react-native react-native-reanimated react-native-svg react-native-worklets

  1. Add the pieces it builds on: Avatar, Button, Header, Icon, Input, Item, Screen, Switch, Text.

  2. Copy the source into components/blocks/settings-account.tsx:

uniwind/components/blocks/settings-account.tsx
import { cn } from "cn"
import {
  CaretRightIcon,
  CheckIcon,
  CloudIcon,
  CreditCardIcon,
  DeviceMobileIcon,
  KeyIcon,
  type Icon as PhosphorIcon,
  ShieldIcon,
  UserIcon,
  UsersIcon,
} from "phosphor-react-native"
import * as React from "react"
import { I18nManager, Pressable, View } from "react-native"
import { FadeIn, FadeInDown, ReduceMotion } from "react-native-reanimated"
  1. Update the import paths to match your project.

Usage

import { SettingsAccount } from "@/components/blocks/settings-account"
<SettingsAccount />

Replace ITEMS and the initial email and phone values with your account data. Use onSave, which receives the field and new value, to persist edits.