{"id":19509885,"url":"https://github.com/steamclock/compose_components","last_synced_at":"2026-03-19T10:12:53.399Z","repository":{"id":149805137,"uuid":"439159037","full_name":"steamclock/compose_components","owner":"steamclock","description":"A collection of useful UI components for Jetpack Compose","archived":false,"fork":false,"pushed_at":"2021-12-22T21:18:39.000Z","size":744,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-08T22:06:17.924Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/steamclock.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":"2021-12-16T23:58:26.000Z","updated_at":"2022-11-24T14:09:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"d0fee61c-3737-4317-bcc4-faf8b86e22ef","html_url":"https://github.com/steamclock/compose_components","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/steamclock/compose_components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steamclock%2Fcompose_components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steamclock%2Fcompose_components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steamclock%2Fcompose_components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steamclock%2Fcompose_components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steamclock","download_url":"https://codeload.github.com/steamclock/compose_components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steamclock%2Fcompose_components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29555216,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-17T18:16:07.221Z","status":"ssl_error","status_checked_at":"2026-02-17T18:16:04.782Z","response_time":100,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":[],"created_at":"2024-11-10T23:13:49.869Z","updated_at":"2026-02-17T19:32:27.520Z","avatar_url":"https://github.com/steamclock.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nice Components\n\nA simple library with some nice looking Jetpack Compose UI components to get your next project started 🚀\n\nHelp jump start your prototypes with some sensible default components, then come back later and customize the look and feel of your app all in one place.\n\n![](1.png)\n![](2.png)\n![](3.png)\n![](4.png)\n\n## Usage\n\n### Example Project\n\nYou can clone and run the example project to see examples of all the default components, plus a little sample of a more customized sign in screen.\n\n### Straight out of the Box\n\n```kotlin\n@Composable\nfun DemoView() {\n    NiceComponentsTheme {\n        ScreenTitle(\"I'm a nice big title!\")\n    }\n}\n```\n\n### Customizing Components\n\nOnce you're ready to start putting your own touch on components, you've got a couple options, based on what you'd like to change...\n\n#### Setting a Global Config at Startup\n\nIf you'd like to change _all_ instances of a component, we recommend creating a custom config that you can set when your app first starts. Note that you once you've set this config, you'll be unable to update it.\n\n\nIn the case of multiple customizations applying to the same component, the _most specific_ one will take precedence.\n\n```kotlin\nclass MainActivity : ComponentActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContent { \n            val config = Config.default.copy(\n                primaryButtonStyle = Config.default.primaryButtonStyle.copy(\n                    surfaceColor = Color.Red,\n                    onSurfaceColor = Color.Black\n                )\n            )\n            NiceComponentsTheme(config) {\n                // your content here\n            }\n        }\n    }\n}\n```\n\n\n#### Extending an Existing Component\n\n```kotlin\n@Composable\nfun CustomPrimaryButton(text: String, onClick: () -\u003e Unit) {\n    PrimaryButton(\n        text = text,\n        buttonStyle = ButtonStyle(\n            textStyle = CurrentConfig.typeTheme.body1,\n            surfaceColor = Color.Red,\n            onSurfaceColor = Color.Black\n        ),\n        onClick = onClick\n    )\n}\n```\n\n#### Material Components Interop\n\n`NiceComponentsTheme` is built on top of `MaterialTheme`, so all colours and typography should be applied to other Jetpack Compose Material Components within it. You can also access the current loaded configuration using the `CurrentConfig` object, which is provided to all children of a `NiceComponentsTheme` via composition local. \n\n#### Customizing a Single Instance of a Component\n\n```kotlin\n@Composable\nfun Example() {\n    PrimaryButton(\n        text = \"Tap me!\",\n        buttonStyle = ButtonStyle(\n            textStyle = CurrentConfig.typeTheme.body1,\n            surfaceColor = Color.Red,\n            onSurfaceColor = Color.Black\n        )\n    ) {\n        println(\"I've been tapped!\")\n    }\n}\n```\n\n### Using `StatefulView`\n\nWe've found with Jetpack Compose it's very common to have a view whose state changes based on some content state defined in its ViewModel. With `StatefulView`, you can pass in your current state, and the desired loaded state and have things automatically update as your state changes. You can also update your error, loading and noData states to suit your needs.\n\nSee [StatefulExampleView](https://github.com/steamclock/compose_components/blob/main/Sample/app/src/main/java/com/steamclock/compose_components/views/StatefulExample.kt) for a full example.\n\n### Setting a Color Palette\n\nComponents are colored using a theme inspired by the [Material Design color system](https://material.io/design/color/the-color-system.html#color-theme-creation).\n\n| Component | Text Color | Background Color |\n| ------------- | ------ | ------------ |\n| Primary Button | onPrimary  | primary  |\n| Secondary Button |  onSecondary | secondary |\n| Inactive Button | background | secondary |\n| Destructive Button | onError | error |\n| Body Text | onSurface | n/a |\n| Detail Text | onSurface | n/a |\n\n```kotlin\nclass MainActivity : ComponentActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContent { \n            val lightColors = NiceComponentsLightColors.copy(\n                primary = colorResource(id = R.color.design_default_color_primary),\n                onPrimary = colorResource(id = R.color.design_default_color_on_primary)\n            )\n            val darkColors = NiceComponentsDarkColors\n            val config = Config(colorTheme = if (isSystemInDarkTheme()) darkColors else lightColors)\n            NiceComponentsTheme(config) {\n                // content\n            }\n        }\n    }\n}\n\n```\n\n#### Setting a Custom Font\n\nJust like how you can set a `colorTheme`, you can also set a `typeTheme` that defines the default font, size and weight for all components.\n\n| Component | Type Name |\n| ------------- | ------ | \n| Primary Button | button | \n| Secondary Button |  button | \n| Inactive Button | button | \n| Destructive Button | button | \n| Body Text | body1 | \n| Detail Text | body1 | \n\n```kotlin\n    val config = Config.default.copy(\n        primaryButtonStyle = Config.default.primaryButtonStyle.copy(\n            TypeTheme.TextStyle(\n                size = 16.sp,\n                fontFamily = FontFamily.SansSerif,\n                fontWeight = FontWeight.SemiBold\n            )\n        )\n    )\n    NiceComponentsTheme(config) {\n        // content\n    }\n```\n\n\n### Installation\n[![](https://jitpack.io/v/steamclock/compose_components.svg)](https://jitpack.io/#steamclock/compose_components)\n\n1. Add this in your **root** build.gradle at the end of repositories:\n```gradle\nallprojects {\n    repositories {\n        // other repositories\n        maven { url 'https://jitpack.io' }\n    }\n}\n``` \n\n2. Add the dependency in your app module's build.gradle:\n```gradle\ndependencies {\n    implementation \"com.github.steamclock:compose_components:\u003cVERSION\u003e\"\n}\n```\nMost recent version can be found [here](https://github.com/steamclock/compose_components/releases)\n\n3. Sync your project gradle files\n\n4. NiceComponents should now be available in the project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteamclock%2Fcompose_components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteamclock%2Fcompose_components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteamclock%2Fcompose_components/lists"}