or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

buttons.mdcontent.mdindex.mdinputs.mdlayout.mdnavigation.mdtheming.md
tile.json

index.mddocs/

Material3 UIKit ARM64

Material3 UIKit ARM64 provides Material Design 3 components for iOS applications built with Compose Multiplatform. This package delivers the complete Material3 design system optimized for iOS UIKit ARM64 architecture, enabling cross-platform UI development with native iOS performance and behavior.

Package Information

  • Package Name: org.jetbrains.compose.material3:material3-uikitarm64
  • Package Version: 1.8.2
  • Package Type: gradle
  • Language: Kotlin
  • Platform: iOS UIKit ARM64
  • Material3 Version: 1.3.1 (dependency)
  • Installation: implementation(compose.material3)

Core Imports

import androidx.compose.material3.*
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Typography
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.Shapes

For experimental APIs:

@file:OptIn(ExperimentalMaterial3Api::class)
import androidx.compose.material3.*

Basic Usage

import androidx.compose.material3.*
import androidx.compose.runtime.*

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyApp() {
    MaterialTheme(
        colorScheme = lightColorScheme(),
        typography = Typography()
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("My iOS App") }
                )
            }
        ) { paddingValues ->
            Column(
                modifier = Modifier.padding(paddingValues)
            ) {
                Button(
                    onClick = { /* handle click */ }
                ) {
                    Text("Material3 Button")
                }
                
                OutlinedCard {
                    Text(
                        text = "Material3 Card Content",
                        modifier = Modifier.padding(16.dp)
                    )
                }
            }
        }
    }
}

Architecture

Material3 UIKit ARM64 is built around several key systems:

  • Design System: Complete theming foundation with color schemes, typography, and shapes
  • Component Library: Comprehensive set of UI components following Material Design 3 specifications
  • Platform Integration: Native iOS UIKit integration through Compose Multiplatform
  • Type Safety: Full Kotlin type safety with strongly-typed component APIs
  • Experimental APIs: Access to latest Material3 features through opt-in annotations

Capabilities

Theming & Design System

Complete Material3 design system with color schemes, typography scales, and shape definitions. Supports both light and dark themes with full customization.

@Composable
fun MaterialTheme(
    colorScheme: ColorScheme = lightColorScheme(),
    typography: Typography = Typography(),
    shapes: Shapes = Shapes(),
    content: @Composable () -> Unit
)

fun lightColorScheme(
    primary: Color = ColorLightTokens.Primary,
    onPrimary: Color = ColorLightTokens.OnPrimary,
    secondary: Color = ColorLightTokens.Secondary,
    // ... additional color parameters
): ColorScheme

fun darkColorScheme(
    primary: Color = ColorDarkTokens.Primary,
    onPrimary: Color = ColorDarkTokens.OnPrimary,
    secondary: Color = ColorDarkTokens.Secondary,
    // ... additional color parameters
): ColorScheme

Theming & Design System

Buttons & Actions

Interactive button components including filled buttons, outlined buttons, and icon buttons with full customization support.

@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    content: @Composable RowScope.() -> Unit
)

@Composable
fun OutlinedButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
    content: @Composable RowScope.() -> Unit
)

@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    content: @Composable () -> Unit
)

Buttons & Actions

Input & Selection

Form controls including text fields, checkboxes, radio buttons, and sliders for user input and selection.

@Composable
fun TextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    label: (@Composable () -> Unit)? = null,
    placeholder: (@Composable () -> Unit)? = null
)

@Composable
fun Checkbox(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true
)

@Composable
fun RadioButton(
    selected: Boolean,
    onClick: (() -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true
)

@Composable
fun Slider(
    value: Float,
    onValueChange: (Float) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f
)

Input & Selection

Layout & Surfaces

Foundational layout components including surfaces, cards, and scaffolds for structuring app layouts.

@Composable
fun Surface(
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colorScheme.surface,
    contentColor: Color = contentColorFor(color),
    content: @Composable () -> Unit
)

@Composable
fun Card(
    modifier: Modifier = Modifier,
    colors: CardColors = CardDefaults.cardColors(),
    elevation: CardElevation = CardDefaults.cardElevation(),
    content: @Composable ColumnScope.() -> Unit
)

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Scaffold(
    modifier: Modifier = Modifier,
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    content: @Composable (PaddingValues) -> Unit
)

Layout & Surfaces

Navigation Components

Navigation UI components including top app bars and bottom navigation bars for app navigation patterns.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable () -> Unit = {},
    actions: @Composable RowScope.() -> Unit = {}
)

@Composable
fun NavigationBar(
    modifier: Modifier = Modifier,
    containerColor: Color = NavigationBarDefaults.containerColor,
    content: @Composable RowScope.() -> Unit
)

@Composable
fun NavigationBarItem(
    selected: Boolean,
    onClick: () -> Unit,
    icon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    label: (@Composable () -> Unit)? = null
)

Navigation Components

Content Display

Components for displaying text, icons, and progress indicators with Material3 styling.

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    style: TextStyle = LocalTextStyle.current
)

@Composable
fun Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current
)

@Composable
fun CircularProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = ProgressIndicatorDefaults.circularColor
)

Content Display

iOS Platform Integration

UIKit Integration

Material3 components integrate seamlessly with iOS UIKit through Compose Multiplatform:

// iOS app integration
ComposeUIViewController {
    MaterialTheme {
        MyApp()
    }
}

Framework Configuration

Configure for iOS static framework generation:

iosArm64 {
    binaries.framework {
        baseName = "shared"
        isStatic = true
    }
}

Experimental APIs

Access to experimental Material3 features requires opt-in:

@file:OptIn(ExperimentalMaterial3Api::class)

// Gradle configuration
languageSettings {
    optIn("androidx.compose.material3.ExperimentalMaterial3Api")
}

Currently experimental components include:

  • Scaffold
  • TopAppBar
  • Various navigation and input components

Types

Core Types

interface ColorScheme {
    val primary: Color
    val onPrimary: Color
    val secondary: Color
    val onSecondary: Color
    // ... additional colors
}

class Typography(
    val displayLarge: TextStyle,
    val displayMedium: TextStyle,
    val headlineLarge: TextStyle,
    val titleLarge: TextStyle,
    val bodyLarge: TextStyle,
    val labelLarge: TextStyle
    // ... additional text styles
)

interface ButtonColors {
    fun containerColor(enabled: Boolean): Color
    fun contentColor(enabled: Boolean): Color
}

interface CardColors {
    val containerColor: Color
    val contentColor: Color
}