Salt UI

Light, simple, and user-friendly.

Introduction

Salt UI is UI components based on Compose Multiplatform. The 1.0 version is derived from some UI components of Salt Player. Currently, Salt UI is used in Salt Player, Emo Scroll, Qinalt and other App to serve hundreds of thousands of users.

Compatibility

See Compatibility.

Get started

Salt UI is now available on Maven Central. Click the badge below to visit its distribution page, which displays the latest release version.

Then add dependency in your project:

// Replace <TAG> with the latest version
// e.g. implementation("io.github.moriafly:salt-ui:2.4.0-alpha03")
implementation("io.github.moriafly:salt-ui:<TAG>")

Simple start:

@Composable
fun App() {
    SaltTheme(
        configs = saltConfigs()
    ) {
        // ...
    }
}

See demo: composeApp.

Docs

Once you've added the Salt UI dependency and synced your project, you're ready to use Salt UI.

Prerequisites

If you're using ​Compose Material or ​Material3, note that ​Salt UI is not a full replacement. However, if you need to use them together, you may need to replace some foundational components:

import androidx.compose.material.Text 
import androidx.compose.material3.Text 
import com.moriafly.salt.ui.Text 

import androidx.compose.material.Icon 
import androidx.compose.material3.Icon 
import com.moriafly.salt.ui.Icon 

Theme

Theme is a key part of Salt UI. You can apply SaltTheme where needed, similar to how you'd use MaterialTheme.

But it also differs in many ways. Below is the function declaration for SaltTheme:

@Composable
fun SaltTheme(
    configs: SaltConfigs,
    dynamicColors: SaltDynamicColors = SaltDynamicColors(
        light = lightSaltColors(),
        dark = darkSaltColors()
    ),
    textStyles: SaltTextStyles = SaltTheme.textStyles,
    dimens: SaltDimens = SaltTheme.dimens,
    shapes: SaltShapes = SaltTheme.shapes,
    content: @Composable () -> Unit
)

saltConfigs

In SaltTheme, the configs parameter is required, like this:

SaltTheme(
    configs = SaltConfigs(
        isDarkTheme = false,
        indication = AlphaIndication
    )
)

The isDarkTheme parameter specifies whether dark mode is enabled. Therefore, other parts of your code can check SaltTheme.configs.isDarkTheme to determine if dark mode is active.

if (SaltTheme.config.isDarkTheme) {
    // Do somethings.
}

The indication handles press feedback. By default, Salt UI uses its built-in AlphaIndication effect. To use Android's Material ripple effect instead, specify ripple().

dynamicColors