https://github.com/steamclock/compose_components
A collection of useful UI components for Jetpack Compose
https://github.com/steamclock/compose_components
Last synced: 3 months ago
JSON representation
A collection of useful UI components for Jetpack Compose
- Host: GitHub
- URL: https://github.com/steamclock/compose_components
- Owner: steamclock
- License: mit
- Created: 2021-12-16T23:58:26.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-22T21:18:39.000Z (over 4 years ago)
- Last Synced: 2025-10-08T22:06:17.924Z (8 months ago)
- Size: 727 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Nice Components
A simple library with some nice looking Jetpack Compose UI components to get your next project started 🚀
Help 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.
## Usage
### Example Project
You 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.
### Straight out of the Box
```kotlin
@Composable
fun DemoView() {
NiceComponentsTheme {
ScreenTitle("I'm a nice big title!")
}
}
```
### Customizing Components
Once 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...
#### Setting a Global Config at Startup
If 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.
In the case of multiple customizations applying to the same component, the _most specific_ one will take precedence.
```kotlin
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
val config = Config.default.copy(
primaryButtonStyle = Config.default.primaryButtonStyle.copy(
surfaceColor = Color.Red,
onSurfaceColor = Color.Black
)
)
NiceComponentsTheme(config) {
// your content here
}
}
}
}
```
#### Extending an Existing Component
```kotlin
@Composable
fun CustomPrimaryButton(text: String, onClick: () -> Unit) {
PrimaryButton(
text = text,
buttonStyle = ButtonStyle(
textStyle = CurrentConfig.typeTheme.body1,
surfaceColor = Color.Red,
onSurfaceColor = Color.Black
),
onClick = onClick
)
}
```
#### Material Components Interop
`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.
#### Customizing a Single Instance of a Component
```kotlin
@Composable
fun Example() {
PrimaryButton(
text = "Tap me!",
buttonStyle = ButtonStyle(
textStyle = CurrentConfig.typeTheme.body1,
surfaceColor = Color.Red,
onSurfaceColor = Color.Black
)
) {
println("I've been tapped!")
}
}
```
### Using `StatefulView`
We'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.
See [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.
### Setting a Color Palette
Components are colored using a theme inspired by the [Material Design color system](https://material.io/design/color/the-color-system.html#color-theme-creation).
| Component | Text Color | Background Color |
| ------------- | ------ | ------------ |
| Primary Button | onPrimary | primary |
| Secondary Button | onSecondary | secondary |
| Inactive Button | background | secondary |
| Destructive Button | onError | error |
| Body Text | onSurface | n/a |
| Detail Text | onSurface | n/a |
```kotlin
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
val lightColors = NiceComponentsLightColors.copy(
primary = colorResource(id = R.color.design_default_color_primary),
onPrimary = colorResource(id = R.color.design_default_color_on_primary)
)
val darkColors = NiceComponentsDarkColors
val config = Config(colorTheme = if (isSystemInDarkTheme()) darkColors else lightColors)
NiceComponentsTheme(config) {
// content
}
}
}
}
```
#### Setting a Custom Font
Just like how you can set a `colorTheme`, you can also set a `typeTheme` that defines the default font, size and weight for all components.
| Component | Type Name |
| ------------- | ------ |
| Primary Button | button |
| Secondary Button | button |
| Inactive Button | button |
| Destructive Button | button |
| Body Text | body1 |
| Detail Text | body1 |
```kotlin
val config = Config.default.copy(
primaryButtonStyle = Config.default.primaryButtonStyle.copy(
TypeTheme.TextStyle(
size = 16.sp,
fontFamily = FontFamily.SansSerif,
fontWeight = FontWeight.SemiBold
)
)
)
NiceComponentsTheme(config) {
// content
}
```
### Installation
[](https://jitpack.io/#steamclock/compose_components)
1. Add this in your **root** build.gradle at the end of repositories:
```gradle
allprojects {
repositories {
// other repositories
maven { url 'https://jitpack.io' }
}
}
```
2. Add the dependency in your app module's build.gradle:
```gradle
dependencies {
implementation "com.github.steamclock:compose_components:"
}
```
Most recent version can be found [here](https://github.com/steamclock/compose_components/releases)
3. Sync your project gradle files
4. NiceComponents should now be available in the project.