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-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:
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 {
MainScreen()
}
}
@Composable
fun MainScreen() {
val deviceConfig = rememberDeviceConfiguration()
when (deviceConfig) {
DeviceConfiguration.MOBILE_PORTRAIT -> {
SingleColumnLayout()
}
DeviceConfiguration.TABLET_LANDSCAPE,
DeviceConfiguration.DESKTOP -> {
MultiColumnLayout(columns = deviceConfig.getRecommendedColumns())
}
-> {
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 {
withMaterialTheme()
withCustomMaterialFonts(
displayFont = myBrandFont,
bodyFont = myReadingFont
)
withCustomDimensions(
small = myCustomMobileDimensions,
large = myCustomDesktopDimensions
)
}
) {
MainScreen()
}
}
Platform-Specific Behavior
@Composable
fun PlatformAdaptiveContent() {
val platform = AppTheme.platform
val deviceConfig = rememberDeviceConfiguration()
when {
platform.isAndroid() && deviceConfig.isMobile() -> {
AndroidMobileLayout()
}
platform.isIOS() && deviceConfig.isTablet() -> {
IOSTabletLayout()
}
platform.isDesktop() -> {
DesktopLayout()
}
-> {
DefaultLayout()
}
}
}
📋 Core APIs
🎨 Complete AppTheme Properties
📖 See complete API reference →
📚 Documentation
📖 Complete Documentation → - Full documentation with interactive examples and comprehensive guides
Core Concepts
- Getting Started - Quick setup guide
- Device Configuration - Responsive breakpoints
- Configuration - Theme & responsive customization
Advanced Usage
- Examples - Real-world implementations
- API Reference - Complete API documentation
- Migration Guide - Version upgrade guide
🍎 iOS & Adaptive Widgets
- 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.
🤝 Community & Support
🐛 Found a Bug?
- Report Issues → - Help us improve Composive
- Include device details, code snippets, and expected vs actual behavior
- Check existing issues first
💡 Have an Idea?
- Request Features → - Shape Composive's future
🚀 Want to Contribute?
- Submit Pull Requests → - Code contributions welcome!
- Contributing Guide → - Development setup and guidelines
- Good First Issues → - Perfect for new contributors
💬 General Feedback
- Contact → - Direct feedback to the maintainer
- Linkedin → - Direct feedback to the maintainer
🤝 Contributing
Contributions are welcome! 🎉 Feel free to fork this repository and submit a pull request. Please open an issue first to discuss changes.
🚀 How to Contribute
📋 Contribution Guidelines
- 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
🎯 Areas We Welcome Contributions
- 🐛 Bug fixes - Help make Composive more stable
- ✨ New features - Enhance responsive capabilities
- 📚 Documentation - Improve guides and examples
- 🌐 - Help us add Web platform support
See our Contributing Guide for detailed development setup instructions.
👨💻 About the Author
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.
🙏 Credits
Composive is built on the shoulders of giants. See CREDITS.md for acknowledgments.
📄 License
Copyright 2024 Gursimar Singh
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance the License.
You may obtain a copy of the License at
http:
Unless applicable law agreed to writing, software
distributed under the License distributed an BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express implied.
See the License the specific language governing permissions
limitations under the License.
Made with ❤️ for the Compose Multiplatform community by Gursimar Singh