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

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!

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

• 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

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

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

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

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

Development just got 10x faster! 🚀

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

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

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

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

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

@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()
        }
    }
}

@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
            )
        }
    }
}

@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()
    }
}

@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()
        }
    }
}

📖 See complete API reference →

📖 Complete Documentation → - Full documentation with interactive examples and comprehensive guides

• Getting Started - Quick setup guide
• Device Configuration - Responsive breakpoints
• Configuration - Theme & responsive customization
• Typography - Responsive text system
• Responsive Dimensions - Adaptive spacing

• Examples - Real-world implementations
• API Reference - Complete API documentation
• Migration Guide - Version upgrade guide

• iOS Cupertino Widgets → - Complete iOS-style component library
• Adaptive Widgets → - Platform-adaptive component patterns

See it in action: 🎥

https://github.com/user-attachments/assets/982485e8-c581-4c0e-8302-0cb257acd892

Composive builds upon the excellent compose-cupertino library for iOS theming and adaptive components.

• Report Issues → - Help us improve Composive
• Include device details, code snippets, and expected vs actual behavior
• Check existing issues first

• Request Features → - Shape Composive's future

• Submit Pull Requests → - Code contributions welcome!
• Contributing Guide → - Development setup and guidelines
• Good First Issues → - Perfect for new contributors

• Contact → - Direct feedback to the maintainer
• Linkedin → - Direct feedback to the maintainer

Contributions are welcome! 🎉 Feel free to fork this repository and submit a pull request. Please open an issue first to discuss changes.

1. 🍴 Fork the repository - Click the "Fork" button at the top of this page
2. 🌟 Create your feature branch - git checkout -b feature/amazing-feature
3. 💡 Open an issue first - Discuss your proposed changes with the community
4. ✨ Make your changes - Follow our coding standards and best practices
5. ✅ Test thoroughly - Ensure your changes work across platforms
6. 📝 Commit your changes - git commit -m 'Add some amazing feature'
7. 🚀 Push to the branch - git push origin feature/amazing-feature
8. 🔄 Open a Pull Request - Submit your changes for review

• Quality First: Ensure your code is well-tested and follows Kotlin/Compose best practices
• Documentation: Update relevant documentation for any new features
• Platform Support: Test on Android, iOS, and Desktop platforms when possible
• Responsive Design: Keep responsive behavior in mind for all contributions
• Code Style: Follow the existing code style and conventions

• 🐛 Bug fixes - Help make Composive more stable
• ✨ New features - Enhance responsive capabilities
• 📚 Documentation - Improve guides and examples
• 🌐 Web platform support - Help us add Web platform support
• 🎨 New themes - Create additional theme variations
• 📱 Platform enhancements - Improve iOS, Android, or Desktop-specific features

See our Contributing Guide for detailed development setup instructions.

Gursimar Singh
📧 Email: anonymouslike083@gmail.com
💼 LinkedIn: Connect with me
🐙 GitHub: @Gursimarsingh12

Passionate about creating beautiful, responsive user interfaces and making development tools more accessible to everyone.

Composive is built on the shoulders of giants. See CREDITS.md for acknowledgments.

Copyright 2024 Gursimar Singh

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Made with ❤️ for the Compose Multiplatform community by Gursimar Singh