{"id":36427083,"url":"https://github.com/sridhar-sp/compose-neumorphism","last_synced_at":"2026-01-11T18:01:24.533Z","repository":{"id":45214419,"uuid":"438830994","full_name":"sridhar-sp/compose-neumorphism","owner":"sridhar-sp","description":"Neumorphism design implementation in jetpack compose","archived":false,"fork":false,"pushed_at":"2023-12-10T02:22:53.000Z","size":1148,"stargazers_count":63,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2023-12-10T03:21:44.017Z","etag":null,"topics":["compose","jetpack","modern-android-development","neumorphic-ui","neumorphism"],"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/sridhar-sp.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}},"created_at":"2021-12-16T02:05:43.000Z","updated_at":"2023-12-10T03:21:45.938Z","dependencies_parsed_at":"2023-12-10T03:31:51.776Z","dependency_job_id":null,"html_url":"https://github.com/sridhar-sp/compose-neumorphism","commit_stats":null,"previous_names":[],"tags_count":1,"template":null,"template_full_name":null,"purl":"pkg:github/sridhar-sp/compose-neumorphism","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sridhar-sp%2Fcompose-neumorphism","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sridhar-sp%2Fcompose-neumorphism/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sridhar-sp%2Fcompose-neumorphism/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sridhar-sp%2Fcompose-neumorphism/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sridhar-sp","download_url":"https://codeload.github.com/sridhar-sp/compose-neumorphism/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sridhar-sp%2Fcompose-neumorphism/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28316964,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-11T14:58:17.114Z","status":"ssl_error","status_checked_at":"2026-01-11T14:55:53.580Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["compose","jetpack","modern-android-development","neumorphic-ui","neumorphism"],"created_at":"2026-01-11T18:01:11.389Z","updated_at":"2026-01-11T18:01:24.496Z","avatar_url":"https://github.com/sridhar-sp.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Neumorphism using Jetpack Compose\n\nNeumorphism design implementation in jetpack compose.\n\n[![Maven Central](https://img.shields.io/maven-central/v/io.github.sridhar-sp/neumorphic.svg?label=Maven%20Central)](https://search.maven.org/search?q=g:%22io.github.sridhar-sp%22%20AND%20a:%22neumorphic%22)\n\n#### Featured on [Google dev library](https://devlibrary.withgoogle.com/products/android/repos/sridhar-sp-compose-neumorphism)\n\n## What is Neumorphism\n* Neumorphism is a ui design concept which mainly uses shadows to create awesome looking UI.\n* Basic design concept from `Neumorphism` are [`Extruded`](#extruded-or-elevated-design) and [`Pressed/Flat`](#pressed-design) style.\n* Neumorphism design concept allows us to represent a objects like how it appear on real world. (like a extruded volume control nob on a media player app)\n\n## About this library\n* This library enables android application to create `Neumorphic` design using [`Jetpack Compose`](https://developer.android.com/jetpack/compose)\n\n\n## Sample app preview\n\nDark                       |            Light\n:-------------------------:|:-------------------------:\n![screen-dark]   |  ![screen-light]\n\n## Install\nYou can install `compose-neumorphism` by adding this to your build.gradle file\n``` \ndependencies {\n  implementation 'io.github.sridhar-sp:neumorphic:0.0.6'\n}\n```\n\n## Features\n* Draw shadows on widget to bring out the neumorphic design, following neumorphic components are supported.\n  * Extruded or Elevated view\n  * Pressed View\n* All the above neumorphic component support two corner shape\n  * RoundedCorner\n  * Oval\n* Simply add a single `neu` modifier on any `compose` component to create a *neumorphic* design\n\n## Usage\nRefer the [sample][sample-app-code-link] app provided for more information.\n\n### Extruded or Elevated design\n\n#### Extruded or Elevated button\n\nDark                       |            Light\n:-------------------------:|:-------------------------:\n![elevated-button-dark]   |  ![elevated-button-light]\n\n```\n    Button(\n        modifier = Modifier\n            .defaultMinSize(minHeight = 80.dp)\n            .fillMaxWidth()\n            .padding(defaultWidgetPadding)\n            .neu(\n                lightShadowColor = AppColors.lightShadow(),\n                darkShadowColor = AppColors.darkShadow(),\n                shadowElevation = defaultElevation,\n                lightSource = LightSource.LEFT_TOP,\n                shape = Flat(defaultCornerShape),\n            ),\n        colors = ButtonDefaults.buttonColors(\n            backgroundColor = MaterialTheme.colors.surface\n        )\n    ) {\n        Text(\n            text = \"Button\", style = AppTextStyle.button()\n        )\n    }\n```\n\n\n#### Elevated card view with rounded rectangle shape\nDark                       |            Light\n:-------------------------:|:-------------------------:\n![elevated-card-dark]   |  ![elevated-card-light]\n```\n    Card(\n        modifier = Modifier\n            .size(128.dp)\n            .neu(\n                lightShadowColor = AppColors.lightShadow(),\n                darkShadowColor = AppColors.darkShadow(),\n                shadowElevation = defaultElevation,\n                lightSource = LightSource.LEFT_TOP,\n                shape = Flat(RoundedCorner(24.dp)),\n            ),\n        elevation = 0.dp,\n        shape = RoundedCornerShape(24.dp),\n    ){\n    \t// Add child components here.\n    }\n    \n```\n\n### Pressed design\n\n#### Pressed button\n\nDark                       |            Light\n:-------------------------:|:-------------------------:\n![pressed-button-dark]   |  ![pressed-button-light]\n\n```\n    Button(\n        modifier = Modifier\n            .fillMaxWidth()\n            .padding(defaultWidgetPadding)\n            .neu(\n                lightShadowColor = AppColors.lightShadow(),\n                darkShadowColor = AppColors.darkShadow(),\n                shadowElevation = defaultElevation,\n                lightSource = LightSource.LEFT_TOP,\n                shape = Pressed(defaultCornerShape),\n            ),\n        colors = ButtonDefaults.buttonColors(\n            backgroundColor = MaterialTheme.colors.surface,\n        ),\n        shape = RoundedCornerShape(12.dp),\n        elevation = null\n\n    ) {\n        Text(text = \"Button\", style = AppTextStyle.button())\n    }\n```\n\n#### Pressed card view with rounded rectangle shape\nDark                       |            Light\n:-------------------------:|:-------------------------:\n![pressed-card-dark]   |  ![pressed-card-light]\n```\n    Card(\n        modifier = Modifier\n            .size(128.dp)\n            .neu(\n                lightShadowColor = AppColors.lightShadow(),\n                darkShadowColor = AppColors.darkShadow(),\n                shadowElevation = defaultElevation,\n                lightSource = LightSource.LEFT_TOP,\n                shape = Pressed(RoundedCorner(24.dp)),\n            ),\n        elevation = 0.dp,\n        shape = RoundedCornerShape(24.dp),\n    ){\n    \t// Add child components here.\n    }\n```\n\n### Light source\n\nLEFT_TOP | RIGHT_TOP | LEFT_BOTTOM | RIGHT_BOTTOM\n:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:\n![elevated_card_left_top_dark]| ![elevated_card_right_top_dark] | ![elevated_card_left_bottom_dark] |  ![elevated_card_right_bottom_dark]\n![elevated_card_left_top_light]| ![elevated_card_right_top_light] | ![elevated_card_left_bottom_light] |  ![elevated_card_right_bottom_light]\n\n### Shapes\n\nPressed                       |            Elevated\n:-------------------------:|:-------------------------:\n![shape_pressed_card_dark]   |  ![shape_elevated_card_dark]\n![shape_pressed_card_light]  |  ![shape_elevated_card_light]\n\n## Sample implementation\n\u003ca href='https://play.google.com/store/apps/details?id=com.gandiva.numerology\u0026pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'\u003e\n  \u003cimg alt='Get it on Google Play' height=96 src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png'/\u003e\n\u003c/a\u003e\n\n## Reference\n* https://github.com/fornewid/neumorphism\n* https://github.com/CRED-CLUB/synth-android\n\n[sample-app-code-link]: app/src/main/java/com/gandiva/neumorphism/MainActivity.kt\n[screen-dark]: docs/screens/neu_dark.png\n[screen-light]: docs/screens/neu_light.png\n\n[elevated-button-dark]: docs/clips/elevated_button_dark.png\n[elevated-button-light]: docs/clips/elevated_button_light.png\n\n[elevated-card-dark]: docs/clips/elevated_card_dark.png\n[elevated-card-light]: docs/clips/elevated_card_light.png\n\n\n[pressed-button-dark]: docs/clips/pressed_button_dark.png\n[pressed-button-light]: docs/clips/pressed_button_light.png\n\n[pressed-card-dark]: docs/clips/pressed_card_dark.png\n[pressed-card-light]: docs/clips/pressed_card_light.png\n\n[elevated_card_left_top_dark]: docs/clips/elevated_card_left_top_dark.png\n[elevated_card_right_top_dark]: docs/clips/elevated_card_right_top_dark.png\n[elevated_card_left_bottom_dark]: docs/clips/elevated_card_left_bottom_dark.png\n[elevated_card_right_bottom_dark]: docs/clips/elevated_card_right_bottom_dark.png\n\n[elevated_card_left_top_light]: docs/clips/elevated_card_left_top_light.png\n[elevated_card_right_top_light]: docs/clips/elevated_card_right_top_light.png\n[elevated_card_left_bottom_light]: docs/clips/elevated_card_left_bottom_light.png\n[elevated_card_right_bottom_light]: docs/clips/elevated_card_right_bottom_light.png\n\n[shape_elevated_card_dark]: docs/clips/shape_elevated_card_dark.png\n[shape_elevated_card_light]: docs/clips/shape_elevated_card_light.png\n[shape_pressed_card_dark]: docs/clips/shape_pressed_card_dark.png\n[shape_pressed_card_light]: docs/clips/shape_pressed_card_light.png\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsridhar-sp%2Fcompose-neumorphism","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsridhar-sp%2Fcompose-neumorphism","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsridhar-sp%2Fcompose-neumorphism/lists"}