0
# Material3 for iOS UIKit x64
1

2
Material Design 3 components for Compose Multiplatform iOS UIKit x64 target. This package provides the complete Material3 component library from AndroidX Compose Material3 1.3.1, compiled for iOS x64 architecture (Intel-based iOS simulators and Mac Catalyst apps).
3

4
## Package Information
5

6
- **Package Name**: org.jetbrains.compose.material3:material3-uikitx64
7
- **Package Type**: maven
8
- **Language**: Kotlin
9
- **Platform**: iOS UIKit x64
10
- **Base Version**: Material3 1.3.1 (AndroidX Compose)
11
- **Installation**: Add to your `build.gradle.kts`:
12

13
```kotlin
14
plugins {
15
    kotlin("multiplatform")
16
    id("org.jetbrains.compose") version "1.8.2"
17
    id("org.jetbrains.kotlin.plugin.compose") version "2.1.0"
18
}
19

20
kotlin {
21
    iosX64()
22
    
23
    sourceSets {
24
        commonMain.dependencies {
25
            implementation(compose.material3)
26
        }
27
    }
28
}
29
```
30

31
## Core Imports
32

33
Import Material3 components for Compose Multiplatform:
34

35
```kotlin
36
import androidx.compose.material3.*
37
import androidx.compose.material3.MaterialTheme
38
import androidx.compose.material3.Button
39
import androidx.compose.material3.Text
40
import androidx.compose.material3.Surface
41
```
42

43
## Basic Usage
44

45
Create a Material themed iOS app:
46

47
```kotlin
48
import androidx.compose.material3.*
49
import androidx.compose.foundation.layout.*
50
import androidx.compose.ui.window.ComposeUIViewController
51

52
fun MainViewController() = ComposeUIViewController {
53
    MaterialTheme(
54
        colorScheme = lightColorScheme(
55
            primary = Color(0xFF6750A4),
56
            onPrimary = Color(0xFFFFFFFF),
57
            primaryContainer = Color(0xFFEADDFF),
58
            onPrimaryContainer = Color(0xFF21005D)
59
        )
60
    ) {
61
        Scaffold(
62
            topBar = {
63
                TopAppBar(
64
                    title = { Text("Material3 App") }
65
                )
66
            }
67
        ) { paddingValues ->
68
            Surface(
69
                modifier = Modifier
70
                    .fillMaxSize()
71
                    .padding(paddingValues),
72
                color = MaterialTheme.colorScheme.background
73
            ) {
74
                Column(
75
                    modifier = Modifier.padding(16.dp),
76
                    verticalArrangement = Arrangement.spacedBy(8.dp)
77
                ) {
78
                    Button(onClick = { }) {
79
                        Text("Material Button")
80
                    }
81
                    OutlinedButton(onClick = { }) {
82
                        Text("Outlined Button")
83
                    }
84
                }
85
            }
86
        }
87
    }
88
}
89
```
90

91
## Architecture
92

93
Material3 for iOS UIKit x64 provides:
94

95
- **Complete Material3 Component Library**: All standard Material Design 3 components
96
- **iOS UIKit Integration**: Seamless integration with iOS UIKit through ComposeUIViewController
97
- **Cross-Platform Consistency**: Identical API and behavior across all Compose Multiplatform targets
98
- **Material Theming**: Full Material3 color schemes, typography, and shapes
99
- **iOS-Specific Features**: Native iOS system theme detection and platform integration
100

101
## Capabilities
102

103
### Material Theming
104

105
Core theming system with Material3 color schemes, typography, and shapes.
106

107
```kotlin { .api }
108
@Composable
109
fun MaterialTheme(
110
    colorScheme: ColorScheme = lightColorScheme(),
111
    typography: Typography = Typography(),
112
    shapes: Shapes = Shapes(),
113
    content: @Composable () -> Unit
114
)
115

116
fun lightColorScheme(
117
    primary: Color = ColorLightTokens.Primary,
118
    onPrimary: Color = ColorLightTokens.OnPrimary,
119
    primaryContainer: Color = ColorLightTokens.PrimaryContainer,
120
    onPrimaryContainer: Color = ColorLightTokens.OnPrimaryContainer
121
    // ... additional color parameters
122
): ColorScheme
123

124
fun darkColorScheme(
125
    primary: Color = ColorDarkTokens.Primary,
126
    onPrimary: Color = ColorDarkTokens.OnPrimary,
127
    primaryContainer: Color = ColorDarkTokens.PrimaryContainer,
128
    onPrimaryContainer: Color = ColorDarkTokens.OnPrimaryContainer
129
    // ... additional color parameters
130
): ColorScheme
131
```
132

133
[Material3 Components](./material3-components.md)
134

135
### UI Components
136

137
Core Material3 UI components including buttons, text, cards, and navigation elements.
138

139
```kotlin { .api }
140
@Composable
141
fun Button(
142
    onClick: () -> Unit,
143
    modifier: Modifier = Modifier,
144
    enabled: Boolean = true,
145
    shape: Shape = ButtonDefaults.shape,
146
    colors: ButtonColors = ButtonDefaults.buttonColors(),
147
    elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
148
    border: BorderStroke? = null,
149
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
150
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
151
    content: @Composable RowScope.() -> Unit
152
)
153

154
@Composable
155
fun Text(
156
    text: String,
157
    modifier: Modifier = Modifier,
158
    color: Color = Color.Unspecified,
159
    fontSize: TextUnit = TextUnit.Unspecified,
160
    fontStyle: FontStyle? = null,
161
    fontWeight: FontWeight? = null,
162
    fontFamily: FontFamily? = null,
163
    letterSpacing: TextUnit = TextUnit.Unspecified,
164
    textDecoration: TextDecoration? = null,
165
    textAlign: TextAlign? = null,
166
    lineHeight: TextUnit = TextUnit.Unspecified,
167
    overflow: TextOverflow = TextOverflow.Clip,
168
    softWrap: Boolean = true,
169
    maxLines: Int = Int.MAX_VALUE,
170
    minLines: Int = 1,
171
    onTextLayout: (TextLayoutResult) -> Unit = {},
172
    style: TextStyle = MaterialTheme.typography.bodyLarge
173
)
174

175
@Composable
176
fun Scaffold(
177
    modifier: Modifier = Modifier,
178
    topBar: @Composable () -> Unit = {},
179
    bottomBar: @Composable () -> Unit = {},
180
    floatingActionButton: @Composable () -> Unit = {},
181
    floatingActionButtonPosition: FabPosition = FabPosition.End,
182
    containerColor: Color = MaterialTheme.colorScheme.background,
183
    contentColor: Color = contentColorFor(containerColor),
184
    contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
185
    content: @Composable (PaddingValues) -> Unit
186
)
187
```
188

189
[Material3 Components](./material3-components.md)
190

191
### iOS Integration
192

193
iOS-specific integration patterns and UIKit interoperability.
194

195
```kotlin { .api }
196
fun ComposeUIViewController(
197
    configure: ComposeUIViewControllerConfiguration.() -> Unit = {},
198
    content: @Composable () -> Unit
199
): UIViewController
200

201
@Composable
202
expect fun isSystemInDarkTheme(): Boolean
203
```
204

205
[iOS Integration](./ios-integration.md)
206

207
## Types
208

209
```kotlin { .api }
210
data class ColorScheme(
211
    val primary: Color,
212
    val onPrimary: Color,
213
    val primaryContainer: Color,
214
    val onPrimaryContainer: Color,
215
    val inversePrimary: Color,
216
    val secondary: Color,
217
    val onSecondary: Color,
218
    val secondaryContainer: Color,
219
    val onSecondaryContainer: Color,
220
    val tertiary: Color,
221
    val onTertiary: Color,
222
    val tertiaryContainer: Color,
223
    val onTertiaryContainer: Color,
224
    val background: Color,
225
    val onBackground: Color,
226
    val surface: Color,
227
    val onSurface: Color,
228
    val surfaceVariant: Color,
229
    val onSurfaceVariant: Color,
230
    val surfaceTint: Color,
231
    val inverseSurface: Color,
232
    val inverseOnSurface: Color,
233
    val error: Color,
234
    val onError: Color,
235
    val errorContainer: Color,
236
    val onErrorContainer: Color,
237
    val outline: Color,
238
    val outlineVariant: Color,
239
    val scrim: Color
240
)
241

242
data class Typography(
243
    val displayLarge: TextStyle,
244
    val displayMedium: TextStyle,
245
    val displaySmall: TextStyle,
246
    val headlineLarge: TextStyle,
247
    val headlineMedium: TextStyle,
248
    val headlineSmall: TextStyle,
249
    val titleLarge: TextStyle,
250
    val titleMedium: TextStyle,
251
    val titleSmall: TextStyle,
252
    val bodyLarge: TextStyle,
253
    val bodyMedium: TextStyle,
254
    val bodySmall: TextStyle,
255
    val labelLarge: TextStyle,
256
    val labelMedium: TextStyle,
257
    val labelSmall: TextStyle
258
)
259

260
interface ButtonColors {
261
    fun containerColor(enabled: Boolean): Color
262
    fun contentColor(enabled: Boolean): Color
263
}
264

265
interface ButtonElevation {
266
    fun shadowElevation(enabled: Boolean, interactionSource: InteractionSource): State<Dp>
267
    fun tonalElevation(enabled: Boolean, interactionSource: InteractionSource): State<Dp>
268
}
269
```