compose-shadow

Implements drop and inner shadows for Compose, allowing customization of shadow properties like shape, color, offset, blur, and spread for enhanced UI design.

#wasm
#utility
#ui
#desktop
#compose-ui
#compose-multiplatform
#compose

Suggest an edit

Android JVMJVMKotlin/NativeWasmJS

GitHub stars67

Authorsadamglin0

Open issues

LicenseMIT License

Creation dateover 1 year ago

Last activity7 months ago

Latest release2.0.4 (9 months ago)

GitHub repository GitHub pages

Compose Shadow [deprecation]

Compose Multiplatform 1.9 started supporting shadows, so this library is deprecated.

A Kotlin Multiplatform implementation of drop/inner shadows for Compose Multiplatform.

This library will continue to be maintained until this is officially supported in Compose.

Versions

`compose-shadow`	CMP	Kotlin
2.0.4	1.8.1	2.1.21
2.0.3	1.7.3	2.1.10
2.0.1	1.7.1	2.1.0
2.0.0	1.7.1	2.0.21
1.0.0	1.7.0-rc01	2.0.21

Installation

implementation("com.adamglin:compose-shadow:$version")

Platform support

compose-shadow supports these platforms:

[x] Android (SDK > 28)
[x] iOS
[x] Desktop (JVM)
[x] JS/Wasm

Usage

Apply and customize shadow using the dropShadow Modifier:

Drop Shadow

Box(
    Modifier
        .dropShadow(
            shape = RectangleShape,
            color = Color.Black.copy(.5f),
            offsetX = 4.dp,
            offsetY = 4.dp,
            blur = 10.dp,
            spread = 5.dp,
        )
        .background(Color.White),
)

Inner Shadow

Box(
    Modifier
        .innerShadow(
            shape = RectangleShape,
            color = Color.Black.copy(.5f),
            offsetX = 4.dp,
            offsetY = 4.dp,
            blur = 10.dp,
            spread = 5.dp,
        )
        .background(Color.White),
)

Sample

We provided this address here for viewing the wasm online examples.

Screenshots