Empty

iOS

import { FolderOpenIcon } from "phosphor-react-native"
import { Button } from "@/components/ui/button"
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"
import { Icon } from "@/components/ui/icon"
import { Text } from "@/components/ui/text"

export function EmptyExample() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <Icon as={FolderOpenIcon} />
        </EmptyMedia>
        <EmptyTitle>No projects yet</EmptyTitle>
        <EmptyDescription>
          You haven't created any projects yet. Get started by creating your
          first project.
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>
          <Text>Create project</Text>
        </Button>
        <Button variant="link">
          <Text>Import project</Text>
        </Button>
      </EmptyContent>
    </Empty>
  )
}

import EsuissUI
import PhosphorSwift
import SwiftUI

struct EmptyExample: View {
  var body: some View {
    Empty {
      EmptyHeader {
        EmptyMedia(.icon) { Ph.folderOpen.regular }
        EmptyTitle("No projects yet")
        EmptyDescription("You haven't created any projects yet. Get started by creating your first project.")
      }
      EmptyContent {
        Button("Create project") {}
          .buttonStyle(.variant())
        Button("Import project") {}
          .buttonStyle(.variant(.link))
      }
    }
  }
}

import androidx.compose.runtime.Composable
import com.adamglin.PhosphorIcons
import com.adamglin.phosphoricons.Regular
import com.adamglin.phosphoricons.regular.FolderOpen
import com.esuiss.ui.components.Button
import com.esuiss.ui.components.ButtonVariant
import com.esuiss.ui.components.Empty
import com.esuiss.ui.components.EmptyContent
import com.esuiss.ui.components.EmptyDescription
import com.esuiss.ui.components.EmptyHeader
import com.esuiss.ui.components.EmptyMedia
import com.esuiss.ui.components.EmptyMediaVariant
import com.esuiss.ui.components.EmptyTitle
import com.esuiss.ui.components.Icon

@Composable
fun EmptyDefault() {
    Empty {
        EmptyHeader {
            EmptyMedia(variant = EmptyMediaVariant.Icon) {
                Icon(PhosphorIcons.Regular.FolderOpen, contentDescription = null)
            }
            EmptyTitle("No projects yet")
            EmptyDescription("You haven't created any projects yet. Get started by creating your first project.")
        }
        EmptyContent {
            Button("Create project", onClick = {})
            Button("Import project", onClick = {}, variant = ButtonVariant.Link)
        }
    }
}

Empty is a centered column that fills the available space and holds an EmptyHeader with optional EmptyMedia, an EmptyTitle and an EmptyDescription, followed by EmptyContent for actions. Text is centered and the header and content are limited to a readable width.

Use it for empty lists, search results with no matches and first-run screens.

Installation

$ pnpm dlx @esuiss/uim@latest add empty

The CLI also adds what it builds on: Icon, Text.

Manual

Install the dependencies:

npx expo install class-variance-authority cn

Add the pieces it builds on: Icon, Text.
Copy the source into components/ui/empty.tsx:

uniwind/components/ui/empty.tsx

import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"
import { View, type ViewProps } from "react-native"
import { IconClassContext } from "@/components/ui/icon"
import { Text, TextClassContext } from "@/components/ui/text"

function Empty({ className, ...props }: ViewProps) {
  return (
    <TextClassContext.Provider value="text-center">
      <View
        className={cn(
          "w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-2xl p-12",
          className
        )}
        {...props}
      />

Update the import paths to match your project.

Install the dependencies:

npx expo install class-variance-authority cn

Add the pieces it builds on: Icon, Text.
Copy the source into components/ui/empty.tsx:

nativewind/components/ui/empty.tsx

import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"
import { View, type ViewProps } from "react-native"
import { IconClassContext } from "@/components/ui/icon"
import { Text, TextClassContext } from "@/components/ui/text"

function Empty({ className, ...props }: ViewProps) {
  return (
    <TextClassContext.Provider value="text-center">
      <View
        className={cn(
          "w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-2xl p-12",
          className
        )}
        {...props}
      />

Update the import paths to match your project.

Add the pieces it builds on: Icon, Text.
Copy the source into components/ui/empty.tsx:

stylesheet/components/ui/empty.tsx

import { StyleSheet, View, type ViewProps } from "react-native"
import { IconSizeContext } from "@/components/ui/icon"
import { Text, TextStyleContext } from "@/components/ui/text"
import { fontSize, radius, useTheme } from "@/components/ui/theme"

const styles = StyleSheet.create({
  root: {
    width: "100%",
    minWidth: 0,
    flex: 1,
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    gap: 16,
    borderRadius: radius["2xl"],
    padding: 48,

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 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

extension Color {
  public static let surface = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000))
  public static let surfaceSecondary = Color.adaptive(light: .init(0xF5F5F7), dark: .init(0x161617))
  public static let surfaceTertiary = Color.adaptive(light: .init(0xE8E8ED), dark: .init(0x2C2C2E))
  public static let surfaceRaised = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let label = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let labelSecondary = Color.adaptive(light: .init(0x6E6E73), dark: .init(0xA1A1A6))
  public static let labelTertiary = Color.adaptive(light: .init(0x86868B), dark: .init(0x86868B))
  public static let labelQuaternary = Color.adaptive(light: .init(0xD2D2D7), dark: .init(0x424245))
  public static let control = Color.adaptive(light: .init(0x000000, 0.04), dark: .init(0xFFFFFF, 0.1))
  public static let controlPressed = Color.adaptive(light: .init(0x000000, 0.12), dark: .init(0xFFFFFF, 0.22))
  public static let controlSelected = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let controlDisabled = Color.adaptive(light: .init(0x000000, 0.03), dark: .init(0xFFFFFF, 0.05))
  public static let onControlSelected = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000))

Copy the source and every file it uses:

swift/Components/Empty.swift

import SwiftUI

public struct Empty<Content: View>: View {
  let content: Content

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

  public var body: some View {
    VStack(spacing: 16) {
      content
    }
    .multilineTextAlignment(.center)
    .padding(48)
    .frame(maxWidth: .infinity, maxHeight: .infinity)

swift/Components/TextVariant.swift

import SwiftUI

public enum TextVariant: CaseIterable, Sendable {
  case `default`, h1, h2, h3, h4, p, blockquote, code, lead, large, small, muted

  var style: TextStyle {
    switch self {
    case .h1: .xl3
    case .h2: .xl2
    case .h3: .xl
    case .h4, .lead, .large: .lg
    case .code, .small, .muted: .sm
    default: .base
    }
  }

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 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.text.TextStyle
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.DpOffset

kotlin/theme/Tokens.kt

package com.esuiss.ui.theme

import androidx.compose.runtime.Immutable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Immutable
data class Colors(
    val surface: Color,
    val surfaceSecondary: Color,
    val surfaceTertiary: Color,
    val surfaceRaised: Color,
    val label: Color,
    val labelSecondary: Color,
    val labelTertiary: Color,
    val labelQuaternary: Color,

Copy the source and every file it uses:

kotlin/components/Empty.kt

package com.esuiss.ui.components

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.ColumnScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider

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 }

kotlin/components/Icon.kt

package com.esuiss.ui.components

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.takeOrElse
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.Dp
import com.esuiss.ui.theme.EsuissTheme

@Composable
fun Icon(
    imageVector: ImageVector,

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

Usage

import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from "@/components/ui/empty"

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon as={FolderOpenIcon} />
    </EmptyMedia>
    <EmptyTitle>No projects yet</EmptyTitle>
    <EmptyDescription>
      You haven't created any projects yet. Get started by creating your
      first project.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>
      <Text>Create project</Text>
    </Button>
    <Button variant="link">
      <Text>Import project</Text>
    </Button>
  </EmptyContent>
</Empty>

EmptyMedia has two variants: default shows its child as is, such as an illustration, and icon puts an Icon in a small rounded tile. Put buttons or links in EmptyContent.

Add a background class such as bg-surface-secondary to Empty for a filled panel.

Examples

Muted

A filled panel with only a title and description.

iOS

import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty"

export function EmptyMutedExample() {
  return (
    <Empty className="bg-surface-secondary">
      <EmptyHeader>
        <EmptyTitle>No results</EmptyTitle>
        <EmptyDescription>Try a different search.</EmptyDescription>
      </EmptyHeader>
    </Empty>
  )
}

import EsuissUI
import SwiftUI

struct EmptyMutedExample: View {
  var body: some View {
    Empty {
      EmptyHeader {
        EmptyTitle("No results")
        EmptyDescription("Try a different search.")
      }
    }
    .background(Color.surfaceSecondary, in: RoundedRectangle(cornerRadius: Radius.xl2, style: .continuous))
  }
}

import androidx.compose.foundation.background
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.esuiss.ui.components.Empty
import com.esuiss.ui.components.EmptyDescription
import com.esuiss.ui.components.EmptyHeader
import com.esuiss.ui.components.EmptyTitle
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Radius

@Composable
fun EmptyMuted() {
    Empty(Modifier.background(EsuissTheme.colors.surfaceSecondary, RoundedCornerShape(Radius.xl2))) {
        EmptyHeader {
            EmptyTitle("No results")
            EmptyDescription("Try a different search.")
        }
    }
}

API Reference

Empty

Centered container.

ExtendsViewProps

EmptyHeader

Column for media, title and description.

ExtendsViewProps

EmptyMedia

Decorative icon or illustration.

ExtendsViewProps

PropTypeDefault

About: default or icon.
Type: "default""icon"
Default: "default"

EmptyTitle

Heading.

ExtendsReact.ComponentProps<typeof Text>

EmptyDescription

Supporting text.

ExtendsReact.ComponentProps<typeof Text>

EmptyContent

Area for actions.

ExtendsViewProps

Accessibility

EmptyTitle has the heading role.
EmptyMedia is hidden from screen readers, so the title and description must carry the message.

Notes

Uses bg-surface-secondary, text-label and text-label-secondary tokens; light and dark follow the system appearance.