Lifelike tactile UI components using layered gradients, procedural textures (grain, matte, glossy, concentric) and realistic shadows; includes palette-driven buttons, cards, switches, sliders, knobs and d-pads.
SkeuoCompose is a Compose Multiplatform component library designed to bring lifelike, tactile UI elements back to modern applications. It uses layered gradients, procedural textures (grain, matte, glossy, concentric), and realistic shadows to create a sense of depth and physical presence.
Add the dependency to your commonMain source set in your build.gradle.kts:
kotlin {
sourceSets {
val commonMain by getting {
dependencies {
implementation("io.github.quantum3600:skeuo-compose:0.1.0-alpha01")
}
}
}
}
Every component in SkeuoCompose is driven by a SkeuoPalette. A palette defines the highlights, mid-tones, shadows, and textures of a material.
Available Palettes:
Ivory, , , , , , , , , , , .
val myButtonPalette = SkeuoPalettes.Steel
The foundation of the library. All other components use SkeuoSurface internally. It handles the beveling, elevation, and textures.
We offer several button variants for different hardware aesthetics.
SkeuoButton(
text = "Action",
palette = SkeuoPalettes.RoyalBlue,
onClick = { /* Handle click */ }
)
SkeuoKeyButton(
text = "ESC",
palette = SkeuoPalettes.Carbon,
depth = 6.dp,
onClick = { /* ... */ }
)
Containers for your UI content with physical depth.
SkeuoCard(palette = SkeuoPalettes.Ivory) {
Text("Physical Card Content")
}
Tactile input components for a rich user experience.
// Switch
SkeuoSwitch(
checked = isEnabled,
onCheckedChange = { isEnabled = it },
knobPalette = SkeuoPalettes.Metallic
)
// Knob
SkeuoKnob(
value = volume,
onValueChange = { volume = it },
palette = SkeuoPalettes.Steel,
accentColor = Color.Cyan
)
GitBook makes it easy to host beautiful documentation directly from your GitHub repository.
Licensed under the Apache License, Version 2.0. See LICENSE for more details.
SteelMintRoyalBlueCrimsonGoldMetallicIPodClassicRetroBlackCarbonRetroBlueRetroOrangeSkeuoCompose repository.SUMMARY.md in your project root to define the navigation sidebar:
# Table of contents
* [Introduction](README.md)
* [Getting Started](docs/getting-started.md)
* [Components](docs/components.md)
* [Buttons](docs/buttons.md)
* [Controls](docs/controls.md)
docs.skeuocompose.dev.Surfaced from shared tags and platforms — no rankings paid for.