Screen

iOS

import { View } from "react-native"
import { Screen, ScreenContent } from "@/components/ui/screen"
import { Text } from "@/components/ui/text"

function Rows({ count = 4 }: { count?: number }) {
  return (
    <View className="overflow-hidden rounded-2xl bg-muted">
      {Array.from({ length: count }, (_, index) => `Row ${index + 1}`).map(
        (label, index) => (
          <View
            key={label}
            className={
              index > 0 ? "border-t border-border px-4 py-3" : "px-4 py-3"
            }
          >
            <Text>{label}</Text>

import EsuissUI
import SwiftUI

struct ScreenExample: View {
  var body: some View {
    Screen {
      ScreenContent(scroll: false) {
        Text("Account").textVariant(.h2)
        Text("The screen pads every safe-area edge and sets the status bar style from the color scheme.")
          .textVariant(.muted)
        ScreenRows()
      }
    }
  }
}

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Screen
import com.esuiss.ui.components.ScreenContent
import com.esuiss.ui.components.Separator
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.TextVariant
import com.esuiss.ui.theme.EsuissTheme

Screen is a View that fills the screen, paints the bg-background color (or bg-muted for the secondary variant) and adds padding for the safe area insets on the edges you choose. It also renders a StatusBar with light or dark content to match the color scheme.

ScreenContent lays out the body with padding and gaps. With scrollable, it renders a KeyboardScrollView so content scrolls and stays above the keyboard.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/screen

See Installation for the components.json setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add screen

$ pnpm dlx @esuiss/ui@latest add screen --platform swift

$ pnpm dlx @esuiss/ui@latest add screen --platform kotlin

The CLI also adds what it builds on: Keyboard Scroll View.

Manual

Install the dependencies:

npx expo install cn react-native-safe-area-context

Add the pieces it builds on: Keyboard Scroll View.
Copy the source into components/ui/screen.tsx:

uniwind/components/ui/screen.tsx

import { cn } from "cn"
import * as React from "react"
import { StatusBar, useColorScheme, View, type ViewProps } from "react-native"
import { useSafeAreaInsets } from "react-native-safe-area-context"
import { KeyboardScrollView } from "@/components/ui/keyboard-scroll-view"

type ScreenEdge = "top" | "right" | "bottom" | "left"

const ALL_EDGES: readonly ScreenEdge[] = ["top", "right", "bottom", "left"]

const ScreenContext = React.createContext<{
  edges: readonly ScreenEdge[]
} | null>(null)

function Screen({
  edges = ALL_EDGES,

Update the import paths to match your project.

Install the dependencies:

npx expo install cn react-native-safe-area-context

Add the pieces it builds on: Keyboard Scroll View.
Copy the source into components/ui/screen.tsx:

nativewind/components/ui/screen.tsx

import { cn } from "cn"
import * as React from "react"
import { StatusBar, useColorScheme, View, type ViewProps } from "react-native"
import { useSafeAreaInsets } from "react-native-safe-area-context"
import { KeyboardScrollView } from "@/components/ui/keyboard-scroll-view"

type ScreenEdge = "top" | "right" | "bottom" | "left"

const ALL_EDGES: readonly ScreenEdge[] = ["top", "right", "bottom", "left"]

const ScreenContext = React.createContext<{
  edges: readonly ScreenEdge[]
} | null>(null)

function Screen({
  edges = ALL_EDGES,

Update the import paths to match your project.

Install the dependencies:

npx expo install react-native-safe-area-context

Add the pieces it builds on: Keyboard Scroll View.
Copy the source into components/ui/screen.tsx:

stylesheet/components/ui/screen.tsx

import * as React from "react"
import { StatusBar, StyleSheet, View, type ViewProps } from "react-native"
import { useSafeAreaInsets } from "react-native-safe-area-context"
import { KeyboardScrollView } from "@/components/ui/keyboard-scroll-view"
import { useTheme } from "@/components/ui/theme"

type ScreenEdge = "top" | "right" | "bottom" | "left"

const ALL_EDGES: readonly ScreenEdge[] = ["top", "right", "bottom", "left"]

const ScreenContext = React.createContext<{
  edges: readonly ScreenEdge[]
} | null>(null)

const styles = StyleSheet.create({
  root: { flex: 1 },

Update the import paths to match your project.

Target iOS 17 or later.
Copy the theme files every view uses:

swift/Theme/Theme.swift

import CoreText
import SwiftUI
import UIKit

struct RGBA: Sendable {
  let red: CGFloat
  let green: CGFloat
  let blue: CGFloat
  let alpha: CGFloat

  init(_ hex: UInt32, _ alpha: CGFloat = 1) {
    red = CGFloat((hex >> 16) & 0xFF) / 255
    green = CGFloat((hex >> 8) & 0xFF) / 255
    blue = CGFloat(hex & 0xFF) / 255
    self.alpha = alpha
  }

swift/Theme/Tokens.swift

import SwiftUI

public enum EsuissColor {
  public static let background = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000))
  public static let foreground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let card = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let cardForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let popover = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let popoverForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let primary = Color.adaptive(light: .init(0x0071E3), dark: .init(0x2997FF))
  public static let primaryForeground = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0xFFFFFF))
  public static let secondary = Color.adaptive(light: .init(0x000000, 0.04), dark: .init(0xFFFFFF, 0.1))
  public static let secondaryForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let muted = Color.adaptive(light: .init(0xF5F5F7), dark: .init(0x161617))
  public static let mutedForeground = Color.adaptive(light: .init(0x6E6E73), dark: .init(0xA1A1A6))
  public static let accent = Color.adaptive(light: .init(0x000000, 0.06), dark: .init(0xFFFFFF, 0.1))

Copy the source and every file it uses:

swift/Components/Screen.swift

import SwiftUI

extension EnvironmentValues {
  @Entry var screenBackground: Color = EsuissColor.background
}

public struct Screen<Content: View>: View {
  public enum Background: CaseIterable, Sendable {
    case background, muted

    var color: Color {
      switch self {
      case .background: EsuissColor.background
      case .muted: EsuissColor.muted
      }
    }

swift/Components/KeyboardScrollView.swift

import SwiftUI
import UIKit

public struct KeyboardScrollView<Content: View>: View {
  let showsIndicators: Bool
  let content: Content

  public init(showsIndicators: Bool = true, @ViewBuilder content: () -> Content) {
    self.showsIndicators = showsIndicators
    self.content = content()
  }

  public var body: some View {
    ScrollView(.vertical, showsIndicators: showsIndicators) {
      content
        .frame(maxWidth: .infinity, alignment: .topLeading)

Add the files to your app target.

Set minSdk to 24 or higher and add the dependencies:

build.gradle.kts

implementation(platform("androidx.compose:compose-bom:2026.09.00"))
implementation("androidx.compose.foundation:foundation")
implementation("androidx.compose.ui:ui")

Copy the theme files every view uses:

kotlin/theme/Theme.kt

package com.esuiss.ui.theme

import android.content.res.AssetManager
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.dropShadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.shadow.Shadow as DropShadow
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font

kotlin/theme/Tokens.kt

package com.esuiss.ui.theme

import androidx.compose.runtime.Immutable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp

@Immutable
data class Colors(
    val background: Color,
    val foreground: Color,
    val card: Color,
    val cardForeground: Color,
    val popover: Color,
    val popoverForeground: Color,
    val primary: Color,

Copy the source and every file it uses:

kotlin/components/Screen.kt

package com.esuiss.ui.components

import android.app.Activity
import android.content.Context
import android.content.ContextWrapper
import android.os.Build
import android.view.View
import android.view.Window
import android.view.WindowInsetsController
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.ColumnScope

kotlin/components/Content.kt

package com.esuiss.ui.components

import androidx.compose.runtime.compositionLocalOf
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

val LocalContentStyle = compositionLocalOf { TextStyle.Default }

val LocalContentColor = compositionLocalOf { Color.Unspecified }

val LocalIconSize = compositionLocalOf { 20.dp }

Update the com.esuiss.ui package names to match your project.

Usage

import { Screen, ScreenContent } from "@/components/ui/screen"

<Screen className="-m-4">
  <ScreenContent>
    <Text variant="h2">Account</Text>
    <Text variant="muted">
      The screen pads every safe-area edge and sets the status bar style
      from the color scheme.
    </Text>
    <Rows />
  </ScreenContent>
</Screen>

Wrap each screen in Screen and put the body in ScreenContent. Use variant="secondary" for grouped screens such as settings.

Pass edges to pad only some sides, for example ["top"] when a tab bar or bottom bar handles the bottom inset. Set scrollable on ScreenContent for content taller than the screen or for forms.

The app must be wrapped in a SafeAreaProvider from react-native-safe-area-context. ScreenContext exposes the active edges to children.

Examples

Secondary

A screen with the secondary background.

iOS

import { View } from "react-native"
import { Screen, ScreenContent } from "@/components/ui/screen"
import { Text } from "@/components/ui/text"

export function ScreenSecondaryExample() {
  return (
    <Screen variant="secondary" className="-m-4">
      <ScreenContent>
        <Text variant="h2">Settings</Text>
        <View className="overflow-hidden rounded-2xl bg-background">
          {["General", "Privacy", "Notifications"].map((label, index) => (
            <View
              key={label}
              className={
                index > 0 ? "border-t border-border px-4 py-3" : "px-4 py-3"
              }

import EsuissUI
import SwiftUI

struct ScreenSecondaryExample: View {
  var body: some View {
    Screen(background: .muted) {
      ScreenContent(scroll: false) {
        Text("Settings").textVariant(.h2)
        ScreenRows(labels: ["General", "Privacy", "Notifications"], background: EsuissColor.background)
      }
    }
  }
}

struct ScreenRows: View {
  var labels: [String] = (1...4).map { "Row \($0)" }

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Screen
import com.esuiss.ui.components.ScreenContent
import com.esuiss.ui.components.ScreenVariant
import com.esuiss.ui.components.Separator
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.TextVariant

Scrollable

A screen whose content scrolls.

iOS

Screen (scrollable) on iOS in light mode

import { View } from "react-native"
import { Screen, ScreenContent } from "@/components/ui/screen"
import { Text } from "@/components/ui/text"

function Rows({ count = 4 }: { count?: number }) {
  return (
    <View className="overflow-hidden rounded-2xl bg-muted">
      {Array.from({ length: count }, (_, index) => `Row ${index + 1}`).map(
        (label, index) => (
          <View
            key={label}
            className={
              index > 0 ? "border-t border-border px-4 py-3" : "px-4 py-3"
            }
          >
            <Text>{label}</Text>

import EsuissUI
import SwiftUI

struct ScreenScrollableExample: View {
  var body: some View {
    Screen {
      ScreenContent {
        Text("Long content").textVariant(.h2)
        ScreenRows(labels: (1...24).map { "Row \($0)" })
      }
    }
  }
}

struct ScreenRows: View {
  var labels: [String] = (1...4).map { "Row \($0)" }

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Screen
import com.esuiss.ui.components.ScreenContent
import com.esuiss.ui.components.Separator
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.TextVariant

Top edge only

A screen that pads only the top inset.

iOS

Screen (top edge only) on iOS in light mode

import { Screen, ScreenContent } from "@/components/ui/screen"
import { Text } from "@/components/ui/text"

export function ScreenTopEdgeOnlyExample() {
  return (
    <Screen edges={["top"]} className="-m-4">
      <ScreenContent className="bg-muted">
        <Text variant="h3">Top edge only</Text>
        <Text variant="muted">
          The bottom, left and right edges are not padded.
        </Text>
      </ScreenContent>
    </Screen>
  )
}

import EsuissUI
import SwiftUI

struct ScreenTopEdgeOnlyExample: View {
  var body: some View {
    Screen(edges: .top) {
      ScreenContent(scroll: false) {
        Text("Top edge only").textVariant(.h3)
        Text("The bottom, left and right edges are not padded.")
          .textVariant(.muted)
      }
      .background(EsuissColor.muted)
    }
  }
}

import androidx.compose.foundation.background
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.esuiss.ui.components.Screen
import com.esuiss.ui.components.ScreenContent
import com.esuiss.ui.components.ScreenEdge
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.TextVariant
import com.esuiss.ui.theme.EsuissTheme

@Composable
fun ScreenTopEdgeOnly() {
    Screen(edges = setOf(ScreenEdge.Top)) {
        ScreenContent(Modifier.background(EsuissTheme.colors.muted)) {
            Text("Top edge only", variant = TextVariant.H3)
            Text("The bottom, left and right edges are not padded.", variant = TextVariant.Muted)

With bottom bar

A scrollable form with a bottom bar holding the main action.

iOS

Screen (with bottom bar) on iOS in light mode

import { BottomBar, BottomBarContent } from "@/components/ui/bottom-bar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Screen, ScreenContent } from "@/components/ui/screen"
import { Text } from "@/components/ui/text"

export function ScreenWithBottomBarExample() {
  return (
    <Screen className="-m-4">
      <ScreenContent scrollable>
        <Text variant="h2">Your email</Text>
        <Text variant="muted">We will send a code to this address.</Text>
        <Input placeholder="name@example.com" keyboardType="email-address" />
      </ScreenContent>
      <BottomBar separator>
        <BottomBarContent>

import EsuissUI
import SwiftUI

struct ScreenBottomBarDemo: View {
  @State private var email = ""

  var body: some View {
    Screen {
      ScreenContent {
        Text("Your email").textVariant(.h2)
        Text("We will send a code to this address.").textVariant(.muted)
        TextField(String("name@example.com"), text: $email)
          .textFieldStyle(.input)
          .keyboardType(.emailAddress)
          .textInputAutocapitalization(.never)
      }

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.KeyboardType
import com.esuiss.ui.components.BottomBar
import com.esuiss.ui.components.BottomBarContent
import com.esuiss.ui.components.Button
import com.esuiss.ui.components.ButtonSize
import com.esuiss.ui.components.Input
import com.esuiss.ui.components.Screen

API Reference

Screen

The root view that pads for safe area insets.

Prop	Type	Default	Description
`edges`	`readonly ScreenEdge[]`	`ALL_EDGES`	Which sides get safe area padding: any of `top`, `right`, `bottom`, `left`. Defaults to all four.
`variant`	`"default" \| "secondary"`	`"default"`	Background: `default` or `secondary`.

Also accepts the props of ViewProps.

ScreenContent

The padded body, optionally scrollable.

Prop	Type	Default	Description
`scrollable`	`boolean`	`false`	Renders a `KeyboardScrollView` instead of a `View`. Defaults to `false`.

Also accepts the props of ViewProps.

Notes

Uses the bg-background and bg-muted tokens.
The status bar uses light-content in dark mode and dark-content in light mode, following the system appearance.
Requires react-native-safe-area-context and the Keyboard Scroll View component.

iOS

import { View } from "react-native"
import { Screen, ScreenContent } from "@/components/ui/screen"
import { Text } from "@/components/ui/text"

function Rows({ count = 4 }: { count?: number }) {
  return (
    <View className="overflow-hidden rounded-2xl bg-muted">
      {Array.from({ length: count }, (_, index) => `Row ${index + 1}`).map(
        (label, index) => (
          <View
            key={label}
            className={
              index > 0 ? "border-t border-border px-4 py-3" : "px-4 py-3"
            }
          >
            <Text>{label}</Text>

import EsuissUI
import SwiftUI

struct ScreenExample: View {
  var body: some View {
    Screen {
      ScreenContent(scroll: false) {
        Text("Account").textVariant(.h2)
        Text("The screen pads every safe-area edge and sets the status bar style from the color scheme.")
          .textVariant(.muted)
        ScreenRows()
      }
    }
  }
}

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Screen
import com.esuiss.ui.components.ScreenContent
import com.esuiss.ui.components.Separator
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.TextVariant
import com.esuiss.ui.theme.EsuissTheme

ScreenContent lays out the body with padding and gaps. With scrollable, it renders a KeyboardScrollView so content scrolls and stays above the keyboard.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/screen

See Installation for the components.json setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add screen

$ pnpm dlx @esuiss/ui@latest add screen --platform swift

$ pnpm dlx @esuiss/ui@latest add screen --platform kotlin

The CLI also adds what it builds on: Keyboard Scroll View.

Manual

Install the dependencies:

npx expo install cn react-native-safe-area-context

Add the pieces it builds on: Keyboard Scroll View.
Copy the source into components/ui/screen.tsx:

uniwind/components/ui/screen.tsx

import { cn } from "cn"
import * as React from "react"
import { StatusBar, useColorScheme, View, type ViewProps } from "react-native"
import { useSafeAreaInsets } from "react-native-safe-area-context"
import { KeyboardScrollView } from "@/components/ui/keyboard-scroll-view"

type ScreenEdge = "top" | "right" | "bottom" | "left"

const ALL_EDGES: readonly ScreenEdge[] = ["top", "right", "bottom", "left"]

const ScreenContext = React.createContext<{
  edges: readonly ScreenEdge[]
} | null>(null)

function Screen({
  edges = ALL_EDGES,

Update the import paths to match your project.

Install the dependencies:

npx expo install cn react-native-safe-area-context

Add the pieces it builds on: Keyboard Scroll View.
Copy the source into components/ui/screen.tsx:

nativewind/components/ui/screen.tsx

import { cn } from "cn"
import * as React from "react"
import { StatusBar, useColorScheme, View, type ViewProps } from "react-native"
import { useSafeAreaInsets } from "react-native-safe-area-context"
import { KeyboardScrollView } from "@/components/ui/keyboard-scroll-view"

type ScreenEdge = "top" | "right" | "bottom" | "left"

const ALL_EDGES: readonly ScreenEdge[] = ["top", "right", "bottom", "left"]

const ScreenContext = React.createContext<{
  edges: readonly ScreenEdge[]
} | null>(null)

function Screen({
  edges = ALL_EDGES,

Update the import paths to match your project.

Install the dependencies:

npx expo install react-native-safe-area-context

Add the pieces it builds on: Keyboard Scroll View.
Copy the source into components/ui/screen.tsx:

stylesheet/components/ui/screen.tsx

import * as React from "react"
import { StatusBar, StyleSheet, View, type ViewProps } from "react-native"
import { useSafeAreaInsets } from "react-native-safe-area-context"
import { KeyboardScrollView } from "@/components/ui/keyboard-scroll-view"
import { useTheme } from "@/components/ui/theme"

type ScreenEdge = "top" | "right" | "bottom" | "left"

const ALL_EDGES: readonly ScreenEdge[] = ["top", "right", "bottom", "left"]

const ScreenContext = React.createContext<{
  edges: readonly ScreenEdge[]
} | null>(null)

const styles = StyleSheet.create({
  root: { flex: 1 },

Update the import paths to match your project.

Target iOS 17 or later.
Copy the theme files every view uses:

swift/Theme/Theme.swift

import CoreText
import SwiftUI
import UIKit

struct RGBA: Sendable {
  let red: CGFloat
  let green: CGFloat
  let blue: CGFloat
  let alpha: CGFloat

  init(_ hex: UInt32, _ alpha: CGFloat = 1) {
    red = CGFloat((hex >> 16) & 0xFF) / 255
    green = CGFloat((hex >> 8) & 0xFF) / 255
    blue = CGFloat(hex & 0xFF) / 255
    self.alpha = alpha
  }

swift/Theme/Tokens.swift

import SwiftUI

public enum EsuissColor {
  public static let background = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000))
  public static let foreground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let card = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let cardForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let popover = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let popoverForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let primary = Color.adaptive(light: .init(0x0071E3), dark: .init(0x2997FF))
  public static let primaryForeground = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0xFFFFFF))
  public static let secondary = Color.adaptive(light: .init(0x000000, 0.04), dark: .init(0xFFFFFF, 0.1))
  public static let secondaryForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let muted = Color.adaptive(light: .init(0xF5F5F7), dark: .init(0x161617))
  public static let mutedForeground = Color.adaptive(light: .init(0x6E6E73), dark: .init(0xA1A1A6))
  public static let accent = Color.adaptive(light: .init(0x000000, 0.06), dark: .init(0xFFFFFF, 0.1))

Copy the source and every file it uses:

swift/Components/Screen.swift

import SwiftUI

extension EnvironmentValues {
  @Entry var screenBackground: Color = EsuissColor.background
}

public struct Screen<Content: View>: View {
  public enum Background: CaseIterable, Sendable {
    case background, muted

    var color: Color {
      switch self {
      case .background: EsuissColor.background
      case .muted: EsuissColor.muted
      }
    }

swift/Components/KeyboardScrollView.swift

import SwiftUI
import UIKit

public struct KeyboardScrollView<Content: View>: View {
  let showsIndicators: Bool
  let content: Content

  public init(showsIndicators: Bool = true, @ViewBuilder content: () -> Content) {
    self.showsIndicators = showsIndicators
    self.content = content()
  }

  public var body: some View {
    ScrollView(.vertical, showsIndicators: showsIndicators) {
      content
        .frame(maxWidth: .infinity, alignment: .topLeading)

Add the files to your app target.

Set minSdk to 24 or higher and add the dependencies:

build.gradle.kts

implementation(platform("androidx.compose:compose-bom:2026.09.00"))
implementation("androidx.compose.foundation:foundation")
implementation("androidx.compose.ui:ui")

Copy the theme files every view uses:

kotlin/theme/Theme.kt

package com.esuiss.ui.theme

import android.content.res.AssetManager
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.dropShadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.shadow.Shadow as DropShadow
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font

kotlin/theme/Tokens.kt

package com.esuiss.ui.theme

import androidx.compose.runtime.Immutable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp

@Immutable
data class Colors(
    val background: Color,
    val foreground: Color,
    val card: Color,
    val cardForeground: Color,
    val popover: Color,
    val popoverForeground: Color,
    val primary: Color,

Copy the source and every file it uses:

kotlin/components/Screen.kt

package com.esuiss.ui.components

import android.app.Activity
import android.content.Context
import android.content.ContextWrapper
import android.os.Build
import android.view.View
import android.view.Window
import android.view.WindowInsetsController
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.ColumnScope

kotlin/components/Content.kt

package com.esuiss.ui.components

import androidx.compose.runtime.compositionLocalOf
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

val LocalContentStyle = compositionLocalOf { TextStyle.Default }

val LocalContentColor = compositionLocalOf { Color.Unspecified }

val LocalIconSize = compositionLocalOf { 20.dp }

Update the com.esuiss.ui package names to match your project.

Usage

import { Screen, ScreenContent } from "@/components/ui/screen"

<Screen className="-m-4">
  <ScreenContent>
    <Text variant="h2">Account</Text>
    <Text variant="muted">
      The screen pads every safe-area edge and sets the status bar style
      from the color scheme.
    </Text>
    <Rows />
  </ScreenContent>
</Screen>

Wrap each screen in Screen and put the body in ScreenContent. Use variant="secondary" for grouped screens such as settings.

Pass edges to pad only some sides, for example ["top"] when a tab bar or bottom bar handles the bottom inset. Set scrollable on ScreenContent for content taller than the screen or for forms.

The app must be wrapped in a SafeAreaProvider from react-native-safe-area-context. ScreenContext exposes the active edges to children.

Examples

Secondary

A screen with the secondary background.

iOS

import { View } from "react-native"
import { Screen, ScreenContent } from "@/components/ui/screen"
import { Text } from "@/components/ui/text"

export function ScreenSecondaryExample() {
  return (
    <Screen variant="secondary" className="-m-4">
      <ScreenContent>
        <Text variant="h2">Settings</Text>
        <View className="overflow-hidden rounded-2xl bg-background">
          {["General", "Privacy", "Notifications"].map((label, index) => (
            <View
              key={label}
              className={
                index > 0 ? "border-t border-border px-4 py-3" : "px-4 py-3"
              }

import EsuissUI
import SwiftUI

struct ScreenSecondaryExample: View {
  var body: some View {
    Screen(background: .muted) {
      ScreenContent(scroll: false) {
        Text("Settings").textVariant(.h2)
        ScreenRows(labels: ["General", "Privacy", "Notifications"], background: EsuissColor.background)
      }
    }
  }
}

struct ScreenRows: View {
  var labels: [String] = (1...4).map { "Row \($0)" }

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Screen
import com.esuiss.ui.components.ScreenContent
import com.esuiss.ui.components.ScreenVariant
import com.esuiss.ui.components.Separator
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.TextVariant

Scrollable

A screen whose content scrolls.

iOS

import { View } from "react-native"
import { Screen, ScreenContent } from "@/components/ui/screen"
import { Text } from "@/components/ui/text"

function Rows({ count = 4 }: { count?: number }) {
  return (
    <View className="overflow-hidden rounded-2xl bg-muted">
      {Array.from({ length: count }, (_, index) => `Row ${index + 1}`).map(
        (label, index) => (
          <View
            key={label}
            className={
              index > 0 ? "border-t border-border px-4 py-3" : "px-4 py-3"
            }
          >
            <Text>{label}</Text>

import EsuissUI
import SwiftUI

struct ScreenScrollableExample: View {
  var body: some View {
    Screen {
      ScreenContent {
        Text("Long content").textVariant(.h2)
        ScreenRows(labels: (1...24).map { "Row \($0)" })
      }
    }
  }
}

struct ScreenRows: View {
  var labels: [String] = (1...4).map { "Row \($0)" }

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Screen
import com.esuiss.ui.components.ScreenContent
import com.esuiss.ui.components.Separator
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.TextVariant

Top edge only

A screen that pads only the top inset.

iOS

import { Screen, ScreenContent } from "@/components/ui/screen"
import { Text } from "@/components/ui/text"

export function ScreenTopEdgeOnlyExample() {
  return (
    <Screen edges={["top"]} className="-m-4">
      <ScreenContent className="bg-muted">
        <Text variant="h3">Top edge only</Text>
        <Text variant="muted">
          The bottom, left and right edges are not padded.
        </Text>
      </ScreenContent>
    </Screen>
  )
}

import EsuissUI
import SwiftUI

struct ScreenTopEdgeOnlyExample: View {
  var body: some View {
    Screen(edges: .top) {
      ScreenContent(scroll: false) {
        Text("Top edge only").textVariant(.h3)
        Text("The bottom, left and right edges are not padded.")
          .textVariant(.muted)
      }
      .background(EsuissColor.muted)
    }
  }
}

import androidx.compose.foundation.background
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.esuiss.ui.components.Screen
import com.esuiss.ui.components.ScreenContent
import com.esuiss.ui.components.ScreenEdge
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.TextVariant
import com.esuiss.ui.theme.EsuissTheme

@Composable
fun ScreenTopEdgeOnly() {
    Screen(edges = setOf(ScreenEdge.Top)) {
        ScreenContent(Modifier.background(EsuissTheme.colors.muted)) {
            Text("Top edge only", variant = TextVariant.H3)
            Text("The bottom, left and right edges are not padded.", variant = TextVariant.Muted)

With bottom bar

A scrollable form with a bottom bar holding the main action.

iOS

import { BottomBar, BottomBarContent } from "@/components/ui/bottom-bar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Screen, ScreenContent } from "@/components/ui/screen"
import { Text } from "@/components/ui/text"

export function ScreenWithBottomBarExample() {
  return (
    <Screen className="-m-4">
      <ScreenContent scrollable>
        <Text variant="h2">Your email</Text>
        <Text variant="muted">We will send a code to this address.</Text>
        <Input placeholder="name@example.com" keyboardType="email-address" />
      </ScreenContent>
      <BottomBar separator>
        <BottomBarContent>

import EsuissUI
import SwiftUI

struct ScreenBottomBarDemo: View {
  @State private var email = ""

  var body: some View {
    Screen {
      ScreenContent {
        Text("Your email").textVariant(.h2)
        Text("We will send a code to this address.").textVariant(.muted)
        TextField(String("name@example.com"), text: $email)
          .textFieldStyle(.input)
          .keyboardType(.emailAddress)
          .textInputAutocapitalization(.never)
      }

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.KeyboardType
import com.esuiss.ui.components.BottomBar
import com.esuiss.ui.components.BottomBarContent
import com.esuiss.ui.components.Button
import com.esuiss.ui.components.ButtonSize
import com.esuiss.ui.components.Input
import com.esuiss.ui.components.Screen

API Reference

Screen

The root view that pads for safe area insets.

Prop	Type	Default	Description
`edges`	`readonly ScreenEdge[]`	`ALL_EDGES`	Which sides get safe area padding: any of `top`, `right`, `bottom`, `left`. Defaults to all four.
`variant`	`"default" \| "secondary"`	`"default"`	Background: `default` or `secondary`.

Also accepts the props of ViewProps.

ScreenContent

The padded body, optionally scrollable.

Prop	Type	Default	Description
`scrollable`	`boolean`	`false`	Renders a `KeyboardScrollView` instead of a `View`. Defaults to `false`.

Also accepts the props of ViewProps.

Notes

Uses the bg-background and bg-muted tokens.
The status bar uses light-content in dark mode and dark-content in light mode, following the system appearance.
Requires react-native-safe-area-context and the Keyboard Scroll View component.