CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/maven-org-jetbrains-compose-material3--material3-uikitx64

Material Design 3 components for Compose Multiplatform iOS UIKit x64 target

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

Material3 for iOS UIKit x64

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

Package Information

  • Package Name: org.jetbrains.compose.material3:material3-uikitx64
  • Package Type: maven
  • Language: Kotlin
  • Platform: iOS UIKit x64
  • Base Version: Material3 1.3.1 (AndroidX Compose)
  • Installation: Add to your 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)
        }
    }
}

Core Imports

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

Basic Usage

Create 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")
                    }
                }
            }
        }
    }
}

Architecture

Material3 for iOS UIKit x64 provides:

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

Capabilities

Material Theming

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
): ColorScheme

Material3 Components

UI Components

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

Material3 Components

iOS Integration

iOS-specific integration patterns and UIKit interoperability.

fun ComposeUIViewController(
    configure: ComposeUIViewControllerConfiguration.() -> Unit = {},
    content: @Composable () -> Unit
): UIViewController

@Composable
expect fun isSystemInDarkTheme(): Boolean

iOS Integration

Types

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

docs

index.md

ios-integration.md

material3-components.md

tile.json