{"id":17211535,"url":"https://github.com/alorma/compose-settings","last_synced_at":"2026-03-06T01:05:18.304Z","repository":{"id":43636773,"uuid":"360568361","full_name":"alorma/Compose-Settings","owner":"alorma","description":"Compose Multiplatform #Compose Settings library","archived":false,"fork":false,"pushed_at":"2025-03-25T09:54:07.000Z","size":7060,"stargazers_count":498,"open_issues_count":0,"forks_count":30,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-07T00:09:49.704Z","etag":null,"topics":["android","android-library","compose","compose-multiplatform","settings"],"latest_commit_sha":null,"homepage":"https://alorma.github.io/Compose-Settings/","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alorma.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["alorma"],"buy_me_a_coffee":"alorma"}},"created_at":"2021-04-22T15:33:05.000Z","updated_at":"2025-04-02T18:12:55.000Z","dependencies_parsed_at":"2023-02-08T19:15:58.033Z","dependency_job_id":"243fe86a-d48f-4681-b2b1-c08bad566d6f","html_url":"https://github.com/alorma/Compose-Settings","commit_stats":null,"previous_names":[],"tags_count":64,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alorma%2FCompose-Settings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alorma%2FCompose-Settings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alorma%2FCompose-Settings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alorma%2FCompose-Settings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alorma","download_url":"https://codeload.github.com/alorma/Compose-Settings/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248819404,"owners_count":21166477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-library","compose","compose-multiplatform","settings"],"created_at":"2024-10-15T02:57:35.664Z","updated_at":"2026-03-06T01:05:18.295Z","avatar_url":"https://github.com/alorma.png","language":"Kotlin","readme":"# Compose Settings - Multiplatform\n\n\u003cdiv\u003e\n \u003cimg src=\"https://img.shields.io/badge/Platform-Android-brightgreen.svg?logo=android\" alt=\"Badge Android\" /\u003e\n\n\u003cimg src=\"https://img.shields.io/badge/Platform-iOS%20%2F%20macOS-lightgrey.svg?logo=apple\" alt=\"Badge iOS\" /\u003e\n\n\u003cimg src=\"https://img.shields.io/badge/Platform-JVM-8A2BE2.svg?logo=openjdk\" alt=\"Badge JVM\" /\u003e\n\n\u003cimg src=\"https://img.shields.io/badge/Platform-WASM%20%2F%20JS-yellow.svg?logo=javascript\" alt=\"Badge wasm/JS\" /\u003e\n\n\u003c/div\u003e\n\n[![Build](https://github.com/alorma/Compose-Settings/actions/workflows/main.yml/badge.svg)](https://github.com/alorma/Compose-Settings/actions/workflows/main.yml)\n[![Maven Central](https://img.shields.io/maven-central/v/com.github.alorma.compose-settings/ui-tiles.svg)](https://central.sonatype.com/namespace/com.github.alorma.compose-settings)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n![Kotlin](https://img.shields.io/badge/Kotlin-2.3.0-blue.svg?logo=kotlin)\n\n[![Dokka](https://img.shields.io/badge/Documentation-blue)](https://alorma.github.io/Compose-Settings/dokka)\n\n\u003ca href=\"https://www.buymeacoffee.com/alorma\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" alt=\"Buy Me A Coffee\" height=\"41\" width=\"174\"\u003e\u003c/a\u003e\n\n### Preview\n\nThis library provides a set of **Settings** like composable items to help android *Jetpack Compose*\ndevelopers build complex settings screens without all the boilerplate.\n\nTwo flavors are available: standard **Material 3** components and **Material 3 Expressive** components.\nThe expressive variants are built on `SegmentedListItem` and support segmented list styling.\n\n**Ui tiles** (`ui-tiles`) — Material 3\n\n| Component                                             | Screenshot                                                                       |\n|-------------------------------------------------------|----------------------------------------------------------------------------------|\n| [SettingsMenuLink](#SettingsMenuLink)                 | \u003cimg width=\"200\" alt=\"menu.png\" src=\"docs/art/menu-link.png\" /\u003e                  |\n| [SettingsCheckbox](#SettingsCheckbox)                 | \u003cimg width=\"200\" alt=\"checkbox.png\" src=\"docs/art/checkbox.png\" /\u003e               |\n| [SettingsTriStateCheckbox](#SettingsTriStateCheckbox) | \u003cimg width=\"200\" alt=\"triState-checkbox\" src=\"docs/art/triState-checkbox.png\" /\u003e |\n| [SettingsRadioButton](#SettingsRadioButton)           | \u003cimg width=\"200\" alt=\"radiobutton.png\" src=\"docs/art/radiobutton.png\" /\u003e         |\n| [SettingsSwitch](#SettingsSwitch)                     | \u003cimg width=\"200\" alt=\"switch.png\" src=\"docs/art/switch.png\" /\u003e                   |\n| [SettingsGroup](#SettingsGroup)                       | \u003cimg width=\"200\" alt=\"group.png\" src=\"docs/art/group.png\" /\u003e                     |\n\n**Ui tiles extended** (`ui-tiles-extended`) — Material 3\n\n| Component                                   | Screenshot                                                     |\n|---------------------------------------------|----------------------------------------------------------------|\n| [SettingsSlider](#SettingsSlider)           | \u003cimg width=\"200\" alt=\"slider.png\" src=\"docs/art/slider.png\" /\u003e |\n| [SettingsSegmented](#SettingsSegmented)     |                                                                |\n\n**Ui tiles expressive** (`ui-tiles-expressive`) — Material 3 Expressive\n\n\u003e Requires Material 3 Expressive API (`@OptIn(ExperimentalMaterial3ExpressiveApi::class)`).\n\u003e All components support segmented list styling via the `shapes` parameter.\n\n| Component                                                         | Screenshot                                                                 |\n|-------------------------------------------------------------------|----------------------------------------------------------------------------|\n| [SettingsMenuLink (Expressive)](#SettingsMenuLink-Expressive)     | \u003cimg width=\"200\" alt=\"menu.png\" src=\"docs/art/menu-link.png\" /\u003e            |\n| [SettingsCheckbox (Expressive)](#SettingsCheckbox-Expressive)     | \u003cimg width=\"200\" alt=\"checkbox.png\" src=\"docs/art/checkbox.png\" /\u003e         |\n| [SettingsTriStateCheckbox (Expressive)](#SettingsTriStateCheckbox-Expressive) |                                                                |\n| [SettingsRadioButton (Expressive)](#SettingsRadioButton-Expressive) | \u003cimg width=\"200\" alt=\"radiobutton.png\" src=\"docs/art/radiobutton.png\" /\u003e |\n| [SettingsSwitch (Expressive)](#SettingsSwitch-Expressive)         | \u003cimg width=\"200\" alt=\"switch.png\" src=\"docs/art/switch.png\" /\u003e             |\n| [SettingsGroup (Expressive)](#SettingsGroup-Expressive)           |                                                                            |\n| [SettingsButtonGroup](#SettingsButtonGroup)                       | \u003cimg width=\"200\" alt=\"button-group.png\" src=\"docs/art/button-group.png\" /\u003e |\n\n## Install\n\nPick the module(s) you need:\n\n| Module | Contents |\n|--------|----------|\n| `ui-tiles` | Standard M3: MenuLink, Checkbox, TriStateCheckbox, RadioButton, Switch, Group |\n| `ui-tiles-extended` | Standard M3: Slider, Segmented |\n| `ui-tiles-expressive` | Expressive M3: all of the above + ButtonGroup, with segmented list support |\n\n```\n// groovy\nimplementation 'com.github.alorma.compose-settings:ui-tiles:$version'\nimplementation 'com.github.alorma.compose-settings:ui-tiles-extended:$version'\nimplementation 'com.github.alorma.compose-settings:ui-tiles-expressive:$version'\n\n[...]\n\n// kotlin DSL\n\nimplementation(\"com.github.alorma.compose-settings:ui-tiles:$version\")\nimplementation(\"com.github.alorma.compose-settings:ui-tiles-extended:$version\")\nimplementation(\"com.github.alorma.compose-settings:ui-tiles-expressive:$version\")\n\n[...]\n\n// Catalog versions:\n\n[versions]\ncompose-settings = \"{{libVersion}}\"\n\n[libraries]\ncomposeSettings-ui = { group = \"com.github.alorma.compose-settings\", name = \"ui-tiles\", version.ref = \"compose-settings\" }\ncomposeSettings-ui-extended = { group = \"com.github.alorma.compose-settings\", name = \"ui-tiles-extended\", version.ref = \"compose-settings\" }\ncomposeSettings-ui-expressive = { group = \"com.github.alorma.compose-settings\", name = \"ui-tiles-expressive\", version.ref = \"compose-settings\" }\n```\n\n## Usage\n\n### Customization\n\nAll settings components support customization through common parameters:\n\n#### Shape\n\nCustomize the shape of any settings component using the `shape` parameter:\n\n```kotlin\nSettingsSwitch(\n  state = switchState,\n  title = { Text(\"Rounded corners\") },\n  shape = RoundedCornerShape(16.dp), // Custom shape\n  onCheckedChange = { switchState = it },\n)\n```\n\nAvailable shapes include:\n- `RoundedCornerShape(size)` - Rounded corners\n- `CutCornerShape(size)` - Cut corners\n- `CircleShape` - Fully circular\n- Custom shapes implementing the `Shape` interface\n\n#### Text Styles\n\nCustomize title and subtitle text styles using the `textStyles` parameter:\n\n```kotlin\nSettingsCheckbox(\n  state = checkboxState,\n  title = { Text(\"Custom styled title\") },\n  subtitle = { Text(\"Custom styled subtitle\") },\n  textStyles = SettingsTileDefaults.textStyles(\n    titleStyle = MaterialTheme.typography.headlineSmall.copy(fontWeight = FontWeight.Bold),\n    subtitleStyle = MaterialTheme.typography.bodyLarge,\n  ),\n  onCheckedChange = { checkboxState = it },\n)\n```\n\nThis allows you to:\n- Change font sizes, weights, and families\n- Adjust letter spacing and line height\n- Apply custom colors and decorations\n- Match your app's typography system\n\n### Components\n\n#### Material 3 (`ui-tiles`, `ui-tiles-extended`)\n\n##### SettingsMenuLink:\n\n```kotlin\nSettingsMenuLink(\n  title = { Text(text = \"Setting title\") },\n  subtitle = { Text(text = \"Setting subtitle\") },\n  modifier = Modifier,\n  enabled = false / true,\n  icon = { Icon(...) },\n  action = { IconButton() },\n  onClick = { ... },\n)\n```\n\n\u003cimg width=\"300\" alt=\"menu.png\" src=\"docs/art/menu-link.png\" /\u003e\n\n##### SettingsCheckbox:\n\n```kotlin\nSettingsCheckbox(\n  state = false / true,\n  title = { Text(text = \"Setting title\") },\n  subtitle = { Text(text = \"Setting subtitle\") },\n  modifier = Modifier,\n  enabled = false / true,\n  icon = { Icon(...) },\n  onCheckedChange = { newState: Boolean -\u003e },\n)\n```\n\n\u003cimg width=\"300\" alt=\"checkbox.png\" src=\"docs/art/checkbox.png\" /\u003e\n\n##### SettingsTriStateCheckbox:\n\n```kotlin\nSettingsTriStateCheckbox(\n  state = false / true / null,\n  title = { Text(text = \"Setting title\") },\n  subtitle = { Text(text = \"Setting subtitle\") },\n  modifier = Modifier,\n  enabled = false / true,\n  icon = { Icon(...) },\n  onCheckedChange = { newState: Boolean -\u003e },\n)\n```\n\n\u003cimg width=\"300\" alt=\"triState-checkbox.png\" src=\"docs/art/triState-checkbox.png\" /\u003e\n\n##### SettingsRadioButton:\n\n```kotlin\nSettingsRadioButton(\n  state = false / true,\n  title = { Text(text = \"Setting title\") },\n  subtitle = { Text(text = \"Setting subtitle\") },\n  modifier = Modifier,\n  enabled = false / true,\n  icon = { Icon(...) },\n  onClick = { },\n)\n```\n\n\u003cimg width=\"300\" alt=\"radiobutton.png\" src=\"docs/art/radiobutton.png\" /\u003e\n\n##### SettingsSwitch:\n\n```kotlin\nSettingsSwitch(\n  state = false / true,\n  title = { Text(text = \"Setting title\") },\n  subtitle = { Text(text = \"Setting subtitle\") },\n  modifier = Modifier,\n  enabled = false / true,\n  icon = { Icon(...) },\n  onCheckedChange = { newState: Boolean -\u003e },\n)\n```\n\n\u003cimg width=\"300\" alt=\"switch.png\" src=\"docs/art/switch.png\" /\u003e\n\n##### SettingsSlider:\n\n```kotlin\nSettingsSlider(\n  value = x.xf,\n  valueRange = X.f..Y.f,\n  steps = X,\n  title = { Text(text = \"Setting title\") },\n  subtitle = { Text(text = \"Setting subtitle\") },\n  modifier = Modifier,\n  enabled = false / true,\n  icon = { Icon(...) },\n  onValueChange = { newValue: Float -\u003e },\n)\n```\n\n\u003cimg width=\"300\" alt=\"slider.png\" src=\"docs/art/slider.png\" /\u003e\n\n##### SettingsSegmented:\n\n```kotlin\nSettingsSegmented(\n  title = { Text(text = \"Setting title\") },\n  items = listOf(1, 2, 3),\n  selectedItem = 2,\n  itemTitleMap = { item -\u003e \"#$item\" },\n  onItemSelected = { selectedItem -\u003e },\n  modifier = Modifier,\n  enabled = false / true,\n  subtitle = { Text(text = \"Setting subtitle\") },\n  icon = { Icon(...) },\n)\n```\n\n##### SettingsGroup\n\n\u003e Updates on `enabled` will be reflected on its internal components unless you change their\n`enabled` state manually.\n\n```kotlin\nSettingsGroup(\n  modifier = Modifier,\n  enabled = false / true,\n  title = { Text(text = \"SettingsGroup\") },\n  contentPadding = PaddingValues(16.dp),\n  verticalArrangement = Arrangement.spacedBy(8.dp), // Spacing between items (default: 8.dp)\n) {\n    SettingsMenuLink(...)\n    SettingsCheckbox(...)\n    SettingsSwitch(...)\n    ...\n}\n```\n\n**Spacing customization:**\n\nControl the spacing between items in the group using the `verticalArrangement` parameter:\n\n```kotlin\n// Compact spacing\nSettingsGroup(\n  verticalArrangement = Arrangement.spacedBy(4.dp),\n) { ... }\n\n// No spacing (tightly packed items)\nSettingsGroup(\n  verticalArrangement = Arrangement.Top,\n) { ... }\n\n// Large spacing\nSettingsGroup(\n  verticalArrangement = Arrangement.spacedBy(16.dp),\n) { ... }\n```\n\n\u003cimg width=\"300\" alt=\"group.png\" src=\"docs/art/group.png\" /\u003e\n\n---\n\n#### Material 3 Expressive (`ui-tiles-expressive`)\n\n\u003e These components require `@OptIn(ExperimentalMaterial3ExpressiveApi::class)`.\n\u003e\n\u003e They are built on `SegmentedListItem` and expose a `shapes: ListItemShapes` parameter,\n\u003e which enables the segmented list visual style (rounded groups of items with connected borders).\n\n**Segmented list example:**\n\n```kotlin\n@OptIn(ExperimentalMaterial3ExpressiveApi::class)\nval colors = ListItemDefaults.segmentedColors(\n  containerColor = MaterialTheme.colorScheme.surfaceContainer,\n)\n\nSettingsSwitch(\n  state = switchState,\n  title = { Text(\"Wi-Fi\") },\n  colors = colors,\n  shapes = ListItemDefaults.segmentedShapes(index = 0, count = 3),\n  onCheckedChange = { switchState = it },\n)\nSettingsSwitch(\n  state = switchState2,\n  title = { Text(\"Bluetooth\") },\n  colors = colors,\n  shapes = ListItemDefaults.segmentedShapes(index = 1, count = 3),\n  onCheckedChange = { switchState2 = it },\n)\nSettingsMenuLink(\n  title = { Text(\"Airplane mode\") },\n  colors = colors,\n  shapes = ListItemDefaults.segmentedShapes(index = 2, count = 3),\n  onClick = { },\n)\n```\n\n\u003e Use `ListItemDefaults.segmentedShapes(index, count)` to give each item the correct corner\n\u003e rounding based on its position in the group. Pair with\n\u003e `Arrangement.spacedBy(ListItemDefaults.SegmentedGap)` between items.\n\n##### SettingsMenuLink (Expressive):\n\n```kotlin\nSettingsMenuLink(\n  title = { Text(text = \"Setting title\") },\n  subtitle = { Text(text = \"Setting subtitle\") },\n  modifier = Modifier,\n  enabled = false / true,\n  icon = { Icon(...) },\n  action = { IconButton() },\n  colors = colors,\n  shapes = ListItemDefaults.segmentedShapes(index, count),\n  onClick = { ... },\n)\n```\n\n##### SettingsCheckbox (Expressive):\n\n```kotlin\nSettingsCheckbox(\n  state = false / true,\n  title = { Text(text = \"Setting title\") },\n  subtitle = { Text(text = \"Setting subtitle\") },\n  modifier = Modifier,\n  enabled = false / true,\n  icon = { Icon(...) },\n  colors = colors,\n  shapes = ListItemDefaults.segmentedShapes(index, count),\n  onCheckedChange = { newState: Boolean -\u003e },\n)\n```\n\n##### SettingsTriStateCheckbox (Expressive):\n\n```kotlin\nSettingsTriStateCheckbox(\n  state = ToggleableState.On / ToggleableState.Off / ToggleableState.Indeterminate,\n  title = { Text(text = \"Setting title\") },\n  subtitle = { Text(text = \"Setting subtitle\") },\n  modifier = Modifier,\n  enabled = false / true,\n  icon = { Icon(...) },\n  colors = colors,\n  shapes = ListItemDefaults.segmentedShapes(index, count),\n  onCheckedChange = { newState: ToggleableState -\u003e },\n)\n```\n\n##### SettingsRadioButton (Expressive):\n\n```kotlin\nSettingsRadioButton(\n  state = false / true,\n  title = { Text(text = \"Setting title\") },\n  subtitle = { Text(text = \"Setting subtitle\") },\n  modifier = Modifier,\n  enabled = false / true,\n  icon = { Icon(...) },\n  colors = colors,\n  shapes = ListItemDefaults.segmentedShapes(index, count),\n  onClick = { },\n)\n```\n\n##### SettingsSwitch (Expressive):\n\n```kotlin\nSettingsSwitch(\n  state = false / true,\n  title = { Text(text = \"Setting title\") },\n  subtitle = { Text(text = \"Setting subtitle\") },\n  modifier = Modifier,\n  enabled = false / true,\n  icon = { Icon(...) },\n  colors = colors,\n  shapes = ListItemDefaults.segmentedShapes(index, count),\n  onCheckedChange = { newState: Boolean -\u003e },\n)\n```\n\n##### SettingsGroup (Expressive):\n\n\u003e Works exactly like the M3 version. Pair with `Arrangement.spacedBy(ListItemDefaults.SegmentedGap)`\n\u003e and `ListItemDefaults.segmentedShapes` on children to achieve a connected segmented look.\n\n```kotlin\nSettingsGroup(\n  modifier = Modifier,\n  enabled = false / true,\n  title = { Text(text = \"SettingsGroup\") },\n  contentPadding = PaddingValues(16.dp),\n  verticalArrangement = Arrangement.spacedBy(ListItemDefaults.SegmentedGap),\n) {\n    SettingsMenuLink(...)\n    SettingsCheckbox(...)\n    SettingsSwitch(...)\n    ...\n}\n```\n\n##### SettingsButtonGroup\n\n\u003e Exclusive to the expressive module. Uses `OutlinedToggleButton` from Material 3 Expressive.\n\n```kotlin\nSettingsButtonGroup(\n  title = { Text(text = \"Setting title\") },\n  items = listOf(1, 2, 3),\n  selectedItem = 2,\n  itemTitleMap = { item -\u003e \"#$item\" },\n  onItemSelected = { selectedItem -\u003e },\n  modifier = Modifier,\n  enabled = false / true,\n  subtitle = { Text(text = \"Setting subtitle\") },\n  icon = { Icon(...) },\n  colors = colors,\n  shapes = ListItemDefaults.segmentedShapes(index, count),\n)\n```\n\n\u003cimg width=\"300\" alt=\"button-group.png\" src=\"docs/art/button-group.png\" /\u003e\n","funding_links":["https://github.com/sponsors/alorma","https://buymeacoffee.com/alorma","https://www.buymeacoffee.com/alorma"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falorma%2Fcompose-settings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falorma%2Fcompose-settings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falorma%2Fcompose-settings/lists"}