Enhances UI design with responsive and adaptive features, offering automatic theme adaptation, orientation-aware layouts, and device-specific components, improving developer experience with hot reload and zero-configuration setup.
Surfaced from shared tags and platforms — no rankings paid for.
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!
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())
}
-> {
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()
}
-> {
DefaultLayout()
}
}
}
📖 Complete Documentation → - Full documentation with interactive examples and comprehensive guides
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.
Contributions are welcome! 🎉 Feel free to fork this repository and submit a pull request. Please open an issue first to discuss changes.
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 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
| 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 |
| 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 |
| 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 |
| 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 |
git checkout -b feature/amazing-featuregit commit -m 'Add some amazing feature'git push origin feature/amazing-feature