{"id":37026517,"url":"https://github.com/jocoand/compose-showcase","last_synced_at":"2026-01-14T03:05:20.115Z","repository":{"id":246394411,"uuid":"820983791","full_name":"jocoand/compose-showcase","owner":"jocoand","description":"A library to showcase or highlight your features in Jetpack Compose","archived":false,"fork":false,"pushed_at":"2025-07-20T14:45:27.000Z","size":200,"stargazers_count":39,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-20T14:46:10.867Z","etag":null,"topics":["android","android-library","component-highlight","compose","compose-highlight","highlight","jetpack-compose","kotlin","kotlin-library","onboarding","showcase"],"latest_commit_sha":null,"homepage":"","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/jocoand.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":"2024-06-27T15:11:49.000Z","updated_at":"2025-07-20T14:45:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"57338289-a7b7-455e-a98e-5b4393cab7fa","html_url":"https://github.com/jocoand/compose-showcase","commit_stats":null,"previous_names":["jocoand/compose-showcase"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/jocoand/compose-showcase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jocoand%2Fcompose-showcase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jocoand%2Fcompose-showcase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jocoand%2Fcompose-showcase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jocoand%2Fcompose-showcase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jocoand","download_url":"https://codeload.github.com/jocoand/compose-showcase/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jocoand%2Fcompose-showcase/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28408800,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-14T01:52:23.358Z","status":"online","status_checked_at":"2026-01-14T02:00:06.678Z","response_time":107,"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","android-library","component-highlight","compose","compose-highlight","highlight","jetpack-compose","kotlin","kotlin-library","onboarding","showcase"],"created_at":"2026-01-14T03:05:19.525Z","updated_at":"2026-01-14T03:05:20.089Z","avatar_url":"https://github.com/jocoand.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \n  # Compose Showcase\n\n  \u003cimg src=\"https://img.shields.io/badge/platform-android-brightgreen.svg\" alt=\"platform\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/license-MIT-green.svg\" alt=\"license\"\u003e\n  \u003cimg src=\"https://github.com/jocoand/compose-showcase/actions/workflows/verify-screenshot-test.yml/badge.svg?branch=main\" alt=\"status\"\u003e\n\n  \u003cp\u003e\n    \n  A library for showcasing your feature in Jetpack Compose.\n  \n  \u003c/p\u003e\n\n  \n\u003c/div\u003e\n\n## 🍁 Sequence Showcase\n\u003cp\u003e\n\u003cimg src=\"https://img.shields.io/badge/mavenCentral-1.3.1-blue.svg\" alt=\"version\"\u003e\n\nCreating a sequence of showcases in a specific order.\n\n\u003cimg src=\"https://github.com/user-attachments/assets/c4826028-2699-4a70-ab83-edee811f3884\" width=\"275\" alt=\"preview\"\u003e\n\n\u003cimg src=\"https://github.com/user-attachments/assets/f32269a3-eb95-4b41-8cdc-d497e82271e3\" width=\"273\" alt=\"preview2\"\u003e\n\n\u003c/p\u003e\n\n### Installation\n- Gradle\n  ```\n  implementation(\"io.github.jocoand:showcase-sequence:1.3.1\")\n  ```\n\n### Usage\n- #### Create your Showcase dialog\n\n- ```\n    @Composable\n    fun MyShowcaseDialog(text: String, onClick: () -\u003e Unit) {\n        Column {\n            Text(text = text)\n            Spacer(modifier = Modifier.height(8.dp))\n            Button(onClick = onClick) {\n                Text(\"Nice !\")\n            }\n        }\n    }\n  ```\n  or you can use our [Predefined Dialog](https://github.com/jocoand/compose-showcase?tab=readme-ov-file#-dialog)\n- #### Declare the `SequenceShowcase` \u0026 `sequenceShowcaseState`\n- ```\n  val sequenceShowcaseState = rememberSequenceShowcaseState()\n  \n  SequenceShowcase(state = sequenceShowcaseState) {\n      Scaffold(\n        ...\n  ```\n\n- #### Mark your target view (view to be highlighted) with `sequenceShowcaseTarget` modifier\n\n- ```\n    \n    MyView1(    // View to be highlighted\n      modifier = Modifier\n          .sequenceShowcaseTarget(    // Mark with sequenceShowcaseTarget\n              index = 0,\n              content = {\n                  MyShowcaseDialog(    // Dialog to be displayed\n                      text = \"Hey, this is Greetings showcase\",\n                  )\n              }\n          ),\n      onClick = { sequenceShowcaseState.start() }\n    )\n  ```\n  `index`: the order to be shown in the sequence\n  \n  `content`: dialog to be displayed\n\n- #### Use `SequenceShowcaseState.start()` to start the showcase\n- ```\n    LaunchButton(\n        ...\n        onClick = { sequenceShowcaseState.start() }\n    )\n  ```\n  `index`: value to start at certain index (optional)\n\n- #### Use `SequenceShowcaseState.next()` to navigate to the next showcase\n- ```\n    MyView2(\n        modifier = Modifier\n            .sequenceShowcaseTarget(\n                index = 1,\n                content = {\n                    MyShowcaseDialog(\n                        text = \"Hey, this is Article show case\",\n                        onClick = {\n                          sequenceShowcaseState.next() // Navigate to next showcase\n                        } \n                    )\n                }\n            )\n    )\n  ```\n\n- You can also dismiss the the showcase using `dimiss()`\n\n- See [sample](https://github.com/jocoand/compose-showcase/blob/main/app/src/main/java/com/joco/composeshowcase/MainActivity.kt) for more more details\n\n### Config\n- `position`\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"https://github.com/user-attachments/assets/1e368c82-b301-4c8a-95f2-d76562686d2b\" width=\"200\"\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"https://github.com/user-attachments/assets/d1a791b9-791e-40cd-aac9-6ff0452a7584\" width=\"200\"\u003e\n      \u003c/td\u003e\n\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003eTop\u003c/td\u003e\n      \u003ctd align=\"center\"\u003eBottom\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\n  `Default`: relative to target position\n\n- `alignment`\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"https://github.com/user-attachments/assets/bcc803b5-f570-43b7-bbfc-a00c3ae1ec5c\" width=\"200\"\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"https://github.com/user-attachments/assets/65695ac9-3fca-4b79-85b6-2d3d30e8d122\" width=\"200\"\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"https://github.com/user-attachments/assets/e4e5f045-cf92-4ef0-8570-a9410867ccbc\" width=\"200\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003eStart\u003c/td\u003e\n      \u003ctd align=\"center\"\u003eCenter\u003c/td\u003e\n      \u003ctd align=\"center\"\u003eEnd\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\n  `Default`: relative to target position\n\n- `highlight`\n  \u003ctable\u003e\n      \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"https://github.com/user-attachments/assets/8ba3932a-1137-42fc-a8dc-64a8868fed03\" width=\"120\"\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg src=\"https://github.com/user-attachments/assets/fc91cc26-2fe5-42c8-902e-0ae04a9257b7\" width=\"120\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003eRectangular\u003c/td\u003e\n      \u003ctd align=\"center\"\u003eCircular\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\n-  `animationDuration`: duration of the enter and exit animation.\n\n### Inspired by 💡 \n- https://github.com/canopas/compose-intro-showcase\n\n### Sample 🎨 \n- See [MainActivity](https://github.com/jocoand/compose-showcase/blob/main/app/src/main/java/com/joco/composeshowcase/MainActivity.kt)\n\n\n## 🌀 ShowcaseView \n\u003cimg src=\"https://img.shields.io/badge/mavenCentral-1.4.5-blue.svg\" alt=\"version\"\u003e\n\nIn case you need more basic usage, you can you use [ShowcaseView](https://github.com/jocoand/compose-showcaseview/tree/main)\n\n```\nimplementation(\"io.github.jocoand:showcase-sequence:1.4.5\")\n```\n\n## 🏮 Dialog\n\n### Arrow Dialog\n\nA predefined dialog with arrow shape pointer.\n\n\u003cimg width=\"280\" alt=\"Screen Shot 2025-04-03 at 13 15 05\" src=\"https://github.com/user-attachments/assets/8c46be99-dc26-4cef-b5a9-36071db4dce9\" /\u003e\n\n### Usage\n```\n.sequenceShowcaseTarget(\n    ...\n    .content  = {\n        ArrowDialog(\n            targetRect = it,\n            content = { \n                // Your dialog content\n            }\n        )\n    }\n  ```\n\n## Contributing\nContribution are welcome! \nFeel free to open an issue or a pull request, if you find any bugs or have any suggestions.\nIf you're new to the project, we recommend starting with a [`good first issue`](https://github.com/jocoand/compose-showcase/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22). that are tailored for first time contributors in the project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjocoand%2Fcompose-showcase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjocoand%2Fcompose-showcase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjocoand%2Fcompose-showcase/lists"}