Composive - Compose Responsive & Adaptive Design 🎨

Note: It's "Composive" (not "composite") - the Kotlin Multiplatform UI library for responsive design! 🎯

Composive is a powerful library that enables you to create responsive and adaptive UIs effortlessly in your Compose Multiplatform applications, with automatic theme adaptation across all platforms.

💡 Developer Tip: No emulators needed! Run on desktop and resize the window to instantly test mobile portrait, landscape, tablet, and desktop layouts with hot reload. Perfect for rapid development! 🔥

Composive stands for Compose Responsive & Adaptive design

🎥 See Composive in Action

Watch how Composive automatically adapts your UI across different screen sizes and platforms:

https://github.com/user-attachments/assets/4eb7544c-b145-41ae-9d9e-5b70468357a7

Desktop window resizing demonstrates real-time responsive layout changes - from mobile portrait to desktop layouts!

✨ Key Features

🔄 Smart Responsive Design

• Automatic screen size detection across all devices (mobile, tablet, desktop)
• Fluid typography scaling that adapts to screen dimensions
• Responsive dimensions for padding, margins, and component sizing
• Orientation-aware layouts (Portrait, Landscape, Square)

🎭 Cross-Platform Theme Adaptation

• Platform-smart defaults: Android gets Material 3, iOS/Desktop get Cupertino
• Dual theme system supporting both Material 3 and Cupertino designs
• Automatic dark/light theme detection
• Custom theme configurations with fine-grained control

📱 Device-Aware Components

• DeviceConfiguration API for layout decisions
• WindowSizeClass integration for precise responsive behavior
• Platform detection with capability-based design decisions
• Orientation handling for optimal layout adaptation

🛠 Developer Experience

• Zero-configuration setup - works out of the box
• Compose-first API with familiar patterns
• Type-safe configuration builders
• Comprehensive documentation with practical examples

📱 Platform Support

| Platform | Status | Features | |----------|---------|----------| | 🤖 Android | ✅ Full Support | Material 3 theme, responsive dimensions, device detection | | 🍎 iOS | ✅ Full Support | Cupertino theme, responsive dimensions, device detection | | 🖥️ Desktop | ✅ Full Support | Platform-adaptive themes, window size handling | | 🌐 Web | 🚧 Coming Soon | Browser-optimized responsive behavior |

Platform-Specific Features

• Android: Material 3 design system with adaptive layouts
• iOS: Native Cupertino components and iOS design patterns
• Desktop: Mouse/keyboard optimized interactions with window resizing
• Web: Progressive enhancement for browser environments (planned)

🔥 Hot Reload Magic

Skip emulators and previews! Run your app on desktop and resize the window to instantly test different layouts:

| Window Width | Device Type | Layout | |--------------|-------------|---------| | < 600dp | 📱 Mobile Portrait | Single column, bottom nav | | 600-840dp (landscape) | 📱 Mobile Landscape | Two columns, horizontal nav | | 600-840dp (portrait) | 📱 Tablet Portrait | Side nav rail, two columns | | 840-1200dp | 🖥️ Tablet Landscape | Navigation drawer, 3 columns | | > 1200dp | 💻 Desktop | Full nav drawer, 4+ columns |

Development just got 10x faster! 🚀

Quick Test Command

./gradlew desktopRunHot --mainClass com.example.yourApp.MainKt --stacktrace --auto

🚀 Quick Start

1. Repository Setup

Add Maven Central repository to your settings.gradle.kts:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        mavenCentral()
    }
}

2. Installation

Add the dependency to your build.gradle.kts (Module: shared or commonMain):

commonMain.dependencies {
    implementation("io.github.gursimarsingh12:composive-responsive-adaptive:1.0.2")
}

3. Basic Setup

@Composable
fun App() {
    ComposiveTheme {
        // Your app content - automatically responsive!
        MainScreen()
    }
}

@Composable
fun MainScreen() {
    val deviceConfig = rememberDeviceConfiguration()
    
    when (deviceConfig) {
        DeviceConfiguration.MOBILE_PORTRAIT -> {
            SingleColumnLayout()
        }
        DeviceConfiguration.TABLET_LANDSCAPE,
        DeviceConfiguration.DESKTOP -> {
            MultiColumnLayout(columns = deviceConfig.getRecommendedColumns())
        }
        else -> {
            TwoColumnLayout()
        }
    }
}

4. Access Theme Values

@Composable
fun ResponsiveCard() {
    Card(
        modifier = Modifier
            .padding(AppTheme.dimensions.cardSpacing)
            .fillMaxWidth(),
        elevation = CardDefaults.cardElevation(
            defaultElevation = AppTheme.dimensions.cardElevation
        )
    ) {
        Column(
            modifier = Modifier.padding(AppTheme.dimensions.cardPadding)
        ) {
            Text(
                text = "Responsive Typography",
                style = AppTheme.materialTypography.headlineSmall
            )
            Text(
                text = "Automatically scales with screen size!",
                style = AppTheme.materialTypography.bodyMedium
            )
        }
    }
}

🎨 Advanced Configuration

Custom Theme Configuration

@Composable
fun App() {
    ComposiveTheme(
        configuration = responsiveConfiguration {
            // Force Material 3 on all platforms
            withMaterialTheme()
            
            // Or force Cupertino on all platforms
            // withCupertinoTheme()
            
            // Set custom fonts
            withCustomMaterialFonts(
                displayFont = myBrandFont,
                bodyFont = myReadingFont
            )
            
            // Customize dimensions
            withCustomDimensions(
                small = myCustomMobileDimensions,
                large = myCustomDesktopDimensions
            )
        }
    ) {
        MainScreen()
    }
}

Platform-Specific Behavior

@Composable
fun PlatformAdaptiveContent() {
    val platform = AppTheme.platform
    val deviceConfig = rememberDeviceConfiguration()
    
    when {
        platform.isAndroid() && deviceConfig.isMobile() -> {
            // Android mobile specific layout
            AndroidMobileLayout()
        }
        platform.isIOS() && deviceConfig.isTablet() -> {
            // iOS tablet specific layout
            IOSTabletLayout()
        }
        platform.isDesktop() -> {
            // Desktop specific layout with mouse interactions
            DesktopLayout()
        }
        else -> {
            // Default responsive layout
            DefaultLayout()
        }
    }
}

📋 Core APIs

| API | Description | Usage | |-----|-------------|-------| | ComposiveTheme | Main theme wrapper | Wrap your app content | | responsiveConfiguration | Configuration DSL | Customize responsive behavior | | rememberDeviceConfiguration() | Get current device type | Make layout decisions | | AppTheme.dimensions | Responsive dimensions | Access spacing, sizes | | AppTheme.materialTypography | Material typography | Text styles | | AppTheme.cupertinoTypography | Cupertino typography | iOS-style text | | AppTheme.platform | Platform information | Platform-specific logic | | DeviceConfiguration | Device type enum | Layout decision making |

🎨 Complete AppTheme Properties

| Property | Type | Example | Responsive Range | |----------|------|---------|------------------| | dimensions | Dimensions | AppTheme.dimensions.cardPadding | 12-32dp | | materialTypography | androidx.compose.material3.Typography | AppTheme.materialTypography.headlineLarge | 30-50sp | | cupertinoTypography | com.slapps.cupertino.theme.Typography | AppTheme.cupertinoTypography.largeTitle | 30-50sp | | fontWeights | ResponsiveFontWeights | AppTheme.fontWeights.heading | Semantic weights | | materialColors | MaterialColorScheme | AppTheme.materialColors.primary | Material 3 colors | | cupertinoColors | ColorScheme | AppTheme.cupertinoColors.accent | iOS colors | | platform | Platform | AppTheme.platform.isAndroid() | Platform detection | | orientation | Orientation | AppTheme.orientation | Portrait/Landscape | | configuration | ResponsiveConfiguration | AppTheme.configuration | Current config |

📖 **[See complete API reference →](doc