https://github.com/kubode/compose-shadow-alternative
Enrich your Compose UI with enhanced shadow expressions. This library offers advanced drop shadow and box shadow features.
https://github.com/kubode/compose-shadow-alternative
box-shadow compose-multiplatform drop-shadow jetpack-compose kotlin-multiplatform
Last synced: 5 months ago
JSON representation
Enrich your Compose UI with enhanced shadow expressions. This library offers advanced drop shadow and box shadow features.
- Host: GitHub
- URL: https://github.com/kubode/compose-shadow-alternative
- Owner: kubode
- License: apache-2.0
- Created: 2023-11-04T07:42:55.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-12-03T22:04:23.000Z (7 months ago)
- Last Synced: 2025-12-07T04:12:09.366Z (6 months ago)
- Topics: box-shadow, compose-multiplatform, drop-shadow, jetpack-compose, kotlin-multiplatform
- Language: Kotlin
- Homepage:
- Size: 557 KB
- Stars: 14
- Watchers: 0
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
Compose has few ways to add shadows.
This library provides box shadows and drop shadows to enrich shadow expression of Compose.
# Install
```kotlin
repositories {
google()
mavenCentral()
// If you want to use the latest snapshot version.
maven {
url = uri("https://central.sonatype.com/repository/maven-snapshots/")
mavenContent {
snapshotsOnly()
includeGroup("io.github.kubode.compose.shadow")
}
}
}
dependencies {
implementation("io.github.kubode.compose.shadow:compose-boxshadow:$latestVersion")
implementation("io.github.kubode.compose.shadow:compose-dropshadow:$latestVersion")
}
```
# Usage
Samples are available in [sample](sample).
## DropShadow
Simple usage:
```kotlin
DropShadow(
color = Color.Black.copy(alpha = 0.5f),
offset = DpOffset(4.dp, 4.dp),
radius = 8.dp,
) {
Image(
painter = painterResource(id = R.drawable.ic_android_black_24dp),
contentDescription = null,
modifier = Modifier.size(48.dp),
colorFilter = ColorFilter.tint(Color(0xFF3DDC84)),
)
}
```
With animation:
```kotlin
val infiniteTransition = rememberInfiniteTransition(label = "infinite")
val degrees by infiniteTransition.animateFloat(
initialValue = 0f,
targetValue = 360f,
animationSpec = infiniteRepeatable(
animation = tween(durationMillis = 1000, easing = LinearEasing)
),
label = "degrees",
)
DropShadow(
color = Color.Black.copy(alpha = 0.5f),
offset = DpOffset(4.dp, 4.dp),
radius = 8.dp,
drawInvalidationTrigger = { degrees },
) {
Image(
painter = painterResource(id = R.drawable.ic_android_black_24dp),
contentDescription = null,
modifier = Modifier
.size(48.dp)
.rotate(degrees),
colorFilter = ColorFilter.tint(Color(0xFF3DDC84)),
)
}
```
## BoxShadow
```kotlin
Box(
modifier = Modifier
.size(48.dp)
.boxShadow(
color = Color.Black.copy(alpha = 0.5f),
offset = DpOffset(4.dp, 4.dp),
radius = 8.dp,
)
.background(Color.Red)
)
```
# Compatibility
`compose-dropshadow` uses `DrawScope.draw` API newly introduced in Compose [`1.6.0-alpha01`](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.6.0-alpha01).
Therefore, it requires Compose 1.6 or higher to work.
# License
```
Copyright 2023 Masatoshi Kubode
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```