Material Design 3 components for Compose Multiplatform iOS UIKit x64 target
npx @tessl/cli install tessl/maven-org-jetbrains-compose-material3--material3-uikitx64@1.8.0Material 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).
build.gradle.kts:plugins {
kotlin("multiplatform")
id("org.jetbrains.compose") version "1.8.2"
id("org.jetbrains.kotlin.plugin.compose") version "2.1.0"
}
kotlin {
iosX64()
sourceSets {
commonMain.dependencies {
implementation(compose.material3)
}
}
}Import Material3 components for Compose Multiplatform:
import androidx.compose.material3.*
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.material3.SurfaceCreate a Material themed iOS app:
import androidx.compose.material3.*
import androidx.compose.foundation.layout.*
import androidx.compose.ui.window.ComposeUIViewController
fun MainViewController() = ComposeUIViewController {
MaterialTheme(
colorScheme = lightColorScheme(
primary = Color(0xFF6750A4),
onPrimary = Color(0xFFFFFFFF),
primaryContainer = Color(0xFFEADDFF),
onPrimaryContainer = Color(0xFF21005D)
)
) {
Scaffold(
topBar = {
TopAppBar(
title = { Text("Material3 App") }
)
}
) { paddingValues ->
Surface(
modifier = Modifier
.fillMaxSize()
.padding(paddingValues),
color = MaterialTheme.colorScheme.background
) {
Column(
modifier = Modifier.padding(16.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
Button(onClick = { }) {
Text("Material Button")
}
OutlinedButton(onClick = { }) {
Text("Outlined Button")
}
}
}
}
}
}Material3 for iOS UIKit x64 provides:
Core theming system with Material3 color schemes, typography, and shapes.
@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,
primaryContainer: Color = ColorLightTokens.PrimaryContainer,
onPrimaryContainer: Color = ColorLightTokens.OnPrimaryContainer
// ... additional color parameters
): ColorScheme
fun darkColorScheme(
primary: Color = ColorDarkTokens.Primary,
onPrimary: Color = ColorDarkTokens.OnPrimary,
primaryContainer: Color = ColorDarkTokens.PrimaryContainer,
onPrimaryContainer: Color = ColorDarkTokens.OnPrimaryContainer
// ... additional color parameters
): ColorSchemeCore Material3 UI components including buttons, text, cards, and navigation elements.
@Composable
fun Button(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
shape: Shape = ButtonDefaults.shape,
colors: ButtonColors = ButtonDefaults.buttonColors(),
elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
border: BorderStroke? = null,
contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
content: @Composable RowScope.() -> Unit
)
@Composable
fun Text(
text: String,
modifier: Modifier = Modifier,
color: Color = Color.Unspecified,
fontSize: TextUnit = TextUnit.Unspecified,
fontStyle: FontStyle? = null,
fontWeight: FontWeight? = null,
fontFamily: FontFamily? = null,
letterSpacing: TextUnit = TextUnit.Unspecified,
textDecoration: TextDecoration? = null,
textAlign: TextAlign? = null,
lineHeight: TextUnit = TextUnit.Unspecified,
overflow: TextOverflow = TextOverflow.Clip,
softWrap: Boolean = true,
maxLines: Int = Int.MAX_VALUE,
minLines: Int = 1,
onTextLayout: (TextLayoutResult) -> Unit = {},
style: TextStyle = MaterialTheme.typography.bodyLarge
)
@Composable
fun Scaffold(
modifier: Modifier = Modifier,
topBar: @Composable () -> Unit = {},
bottomBar: @Composable () -> Unit = {},
floatingActionButton: @Composable () -> Unit = {},
floatingActionButtonPosition: FabPosition = FabPosition.End,
containerColor: Color = MaterialTheme.colorScheme.background,
contentColor: Color = contentColorFor(containerColor),
contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
content: @Composable (PaddingValues) -> Unit
)iOS-specific integration patterns and UIKit interoperability.
fun ComposeUIViewController(
configure: ComposeUIViewControllerConfiguration.() -> Unit = {},
content: @Composable () -> Unit
): UIViewController
@Composable
expect fun isSystemInDarkTheme(): Booleandata class ColorScheme(
val primary: Color,
val onPrimary: Color,
val primaryContainer: Color,
val onPrimaryContainer: Color,
val inversePrimary: Color,
val secondary: Color,
val onSecondary: Color,
val secondaryContainer: Color,
val onSecondaryContainer: Color,
val tertiary: Color,
val onTertiary: Color,
val tertiaryContainer: Color,
val onTertiaryContainer: Color,
val background: Color,
val onBackground: Color,
val surface: Color,
val onSurface: Color,
val surfaceVariant: Color,
val onSurfaceVariant: Color,
val surfaceTint: Color,
val inverseSurface: Color,
val inverseOnSurface: Color,
val error: Color,
val onError: Color,
val errorContainer: Color,
val onErrorContainer: Color,
val outline: Color,
val outlineVariant: Color,
val scrim: Color
)
data class Typography(
val displayLarge: TextStyle,
val displayMedium: TextStyle,
val displaySmall: TextStyle,
val headlineLarge: TextStyle,
val headlineMedium: TextStyle,
val headlineSmall: TextStyle,
val titleLarge: TextStyle,
val titleMedium: TextStyle,
val titleSmall: TextStyle,
val bodyLarge: TextStyle,
val bodyMedium: TextStyle,
val bodySmall: TextStyle,
val labelLarge: TextStyle,
val labelMedium: TextStyle,
val labelSmall: TextStyle
)
interface ButtonColors {
fun containerColor(enabled: Boolean): Color
fun contentColor(enabled: Boolean): Color
}
interface ButtonElevation {
fun shadowElevation(enabled: Boolean, interactionSource: InteractionSource): State<Dp>
fun tonalElevation(enabled: Boolean, interactionSource: InteractionSource): State<Dp>
}