Skip to main content
Hero Light

​
About

Vary is a lightweight, intuitive responsive layout library for Compose
It helps you effortlessly adapt your UI to different screen sizes like phones, tablets, and desktops using a clean, Kotlin-native DSL. Whether it’s switching entire UI layouts or just tweaking a single values, Vary provides a simple and performant way to build fully responsive interfaces.

​
Install

Add the dependency to the dependencies block of your build.gradle.kts file in your commonMain source set.
  • catalogs
  • gradle
1

Step 1

Add the version in your /gradle/libs.versions.toml file under versions
libs.versions.toml
[versions]
vary = "latest_version"
2

Step 2

Add the library in your /gradle/libs.versions.toml file under libraries
libs.versions.toml
[libraries]
vary = { group = "org.bizilabs.vary", name="vary", version.ref = "vary" }
3

Step 3

Add the library to the dependencies block of your build.gradle.kts file in your commonMain source set.
build.gradle.kts
commonMain.dependencies {
    implementation(libs.vary)
}
4

Step 4

Sync project to continue

​
Setup

To enable screen size detection, you only need to wrap your root composable with the Vary provider. This should be done once at the top level of your application.
App.kt
import org.bizilabs.vary.Vary // Make sure to import

@Composable
fun App() {
    YourTheme {
        Vary {
            // Your app's content, e.g., navigation, screens, etc.
        }
    }
}
Under the hood Vary calls LocalWindowInfo.current.containerSize.width to get the width, but you can provide your own implementation
vary.kt
 Vary(
   width = // your custom implementation
 ){
   // your content goes here
 }

​
Usage

The library provides two main functions all names vary for switching UI layouts and for selecting values.

​
Values

Use this to select any non-composable value like a Dp, Color, Int, Modifier, etc. The default (xs) value is a mandatory first parameter. 
val padding = vary(
      xs = 16.dp // Default value
    ){
        md { 24.dp }
        lg { 32.dp }
    }

Box(modifier = Modifier.padding(padding))

// with default only
val paddi = vary(xs = 16.dp)

Box(modifier = Modifier.padding(paddi))
The lambda is not mandatory and it will default to xs incase no other size is declared

​
Layouts

Use this when you need to render completely different composables for different screen sizes. The default (xs) case is provided as a mandatory trailing lambda. 
vary({
    // Optional overrides for other breakpoints
    md {
        Row(modifier = Modifier.padding(24.dp)) {
            // ...  content for medium screens
        }
    }
    lg {
        Row(modifier = Modifier.padding(32.dp)) {
            // ... content for large screens
        }
    }
}) {
    // Default (xs) layout
    Column(modifier = Modifier.padding(16.dp)) {
        // ... Column content
    }
}

// with default only
vary {
  Column(modifier = Modifier.padding(16.dp)) {
        // ... xs content
  }
}

​
Sizes

Vary provides the following sizes
NameLabelBreakpoint
ExtraSmallxs0
Smallsm640
Mediummd768
Largelg1024
ExtraLargexl1280
ExtraExtraLargexxl1536

​
More

Vary is an open source library and we’re always looking for ways to improve it, you can view more by clicking the link below.

Vary

Build responsive apps with compose