{"id":15132442,"url":"https://github.com/popovanton0/heart-switch","last_synced_at":"2025-09-29T00:32:03.802Z","repository":{"id":44407588,"uuid":"463270099","full_name":"popovanton0/heart-switch","owner":"popovanton0","description":"❤️ A heart-shaped toggle switch component for Jetpack Compose","archived":false,"fork":false,"pushed_at":"2024-10-11T20:22:54.000Z","size":815,"stargazers_count":66,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-18T22:38:09.234Z","etag":null,"topics":["android","heart","heart-shape","heart-shaped-curve","jetpack-compose","kotlin","switch","toggle","toggle-switch","ui","ui-components"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/popovanton0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2022-02-24T19:07:35.000Z","updated_at":"2024-12-29T15:10:42.000Z","dependencies_parsed_at":"2024-01-24T21:58:53.012Z","dependency_job_id":null,"html_url":"https://github.com/popovanton0/heart-switch","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/popovanton0/heart-switch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/popovanton0%2Fheart-switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/popovanton0%2Fheart-switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/popovanton0%2Fheart-switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/popovanton0%2Fheart-switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/popovanton0","download_url":"https://codeload.github.com/popovanton0/heart-switch/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/popovanton0%2Fheart-switch/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277450938,"owners_count":25819971,"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","status":"online","status_checked_at":"2025-09-28T02:00:08.834Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","heart","heart-shape","heart-shaped-curve","jetpack-compose","kotlin","switch","toggle","toggle-switch","ui","ui-components"],"created_at":"2024-09-26T04:04:45.806Z","updated_at":"2025-09-29T00:32:03.444Z","avatar_url":"https://github.com/popovanton0.png","language":"Kotlin","funding_links":[],"categories":["Libraries"],"sub_categories":["UI"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"images/hero.gif\" alt=\"heart-switch Demo\"\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003ch1 align=\"center\"\u003eheart-switch\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003eA heart-shaped toggle switch component built using Jetpack Compose. Inspired by Tore Bernhoft's \u003ca href=\"https://dribbble.com/shots/8306407-I-heart-toggle\"\u003eI heart toggle\u003c/a\u003e Dribbble shot and \u003ca href=\"https://github.com/anatoliygatt\"\u003eAnatoliy Gatt\u003c/a\u003e's \u003ca href=\"https://github.com/anatoliygatt/heart-switch\"\u003eReact component\u003c/a\u003e.\u003c/h3\u003e\n\u003cbr\u003e\n\n## Getting Started\n\n[![Release](https://jitpack.io/v/popovanton0/heart-switch.svg)](https://jitpack.io/#popovanton0/heart-switch)\n[![Project Status: Active – The project has reached a stable, usable state and is being actively developed.](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active)\n[![Compatible with Compose — 1.6.0](https://img.shields.io/badge/Compatible%20with%20Compose-1.6.0-brightgreen)](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.6.0)\n\nAdd the following code to your project's _root_ `build.gradle` file:\n\n```groovy\nrepositories {\n    maven { url \"https://jitpack.io\" }\n}\n```\n\nNext, add the dependency below to your _module_'s `build.gradle` file:\n\n```gradle\ndependencies {\n    implementation \"com.github.popovanton0:heart-switch:LATEST_VERSION\"\n}\n```\n\n## Usage\n\nExamples are in the [source code](https://github.com/popovanton0/heart-switch/blob/main/app/src/main/java/com/popovanton0/heartswitch/demo/MainActivity.kt).\n\n### Basic\n\n```kotlin\n@Composable\nfun BasicUsage() {\n    var state by remember { mutableStateOf(true) }\n    HeartSwitch(\n        checked = state,\n        onCheckedChange = { state = it },\n    )\n}\n```\n\n![Basic Usage Preview](images/basic-usage.png)\n\n### Advanced\n\n```kotlin\n@Composable\nfun AdvancedUsage() {\n    var state by remember { mutableStateOf(true) }\n    HeartSwitch(\n        checked = state,\n        onCheckedChange = { state = it },\n        modifier = Modifier,\n        colors = HeartSwitchColors(\n            checkedTrackColor = Color(0xFFE91E63),\n            checkedTrackBorderColor = Color(0xFFC2185B),\n            uncheckedTrackBorderColor = Color(0xFFBDBDBD)\n        ),\n        width = 34.dp,\n        borderWidth = 2.1.dp,\n        movementAnimSpec = spring(stiffness = Spring.StiffnessMediumLow),\n        colorsAnimSpec = spring(stiffness = Spring.StiffnessMediumLow),\n        thumb = { modifier, color -\u003e\n            Box(\n                modifier = modifier\n                    .shadow(12.dp, CircleShape)\n                    .background(color.value, CircleShape)\n            )\n        },\n        enabled = true,\n        interactionSource = remember { MutableInteractionSource() },\n    )\n}\n```\n\n![Advanced Usage Preview](images/advanced-usage.png)\n\nYou can customize colors using `HeartSwitchColors` class:\n\n```kotlin\ndata class HeartSwitchColors(\n    val checkedThumbColor: Color = Color.White,\n    val checkedTrackColor: Color = Color(0xffff708f),\n    val checkedTrackBorderColor: Color = Color(0xffff4e74),\n    val uncheckedThumbColor: Color = Color.White,\n    val uncheckedTrackColor: Color = Color.White,\n    val uncheckedTrackBorderColor: Color = Color(0xffd1d1d1),\n)\n```\n\nAnd, you even can fully customize thumb's appearance using `thumb` composable param. Default\nimplementation is:\n\n```kotlin\n@Composable\nfun Thumb(modifier: Modifier, color: State\u003cColor\u003e) = Box(\n    modifier = modifier\n        .shadow(6.dp, CircleShape)\n        .background(color.value, CircleShape)\n) \n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpopovanton0%2Fheart-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpopovanton0%2Fheart-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpopovanton0%2Fheart-switch/lists"}