CzanBlocks is a set of clean, customizable blocks for Kotlin/Compose Multiplatform apps, built on the CZAN design system. It targets Android, iOS, JVM, JS and WasmJS.

Be sure to show your support by starring ⭐️ this repository!

Every block is a @Composable in the com.tweener.czan.blocks package. Each one takes a modifier, and most take a shape plus colors and sizes built from their ...Defaults object, so you can restyle them without forking them. Default colors and text styles come from MaterialTheme.

• Block: the base card, with an optional title, headline, extra title content, footer and click action. The other blocks are built on it.
• EditableInfoBlock: a block with a title, an optional headline and leading icon, an edit button and an optional delete button.
• TabsBlock: a block with a segmented button on top that switches between tabs, given as a map of tab titles to content.
• InfoPieChartBlock: a block with an animated donut chart (from Chartopia), a progress label, an optional total and a callback when a segment is clicked.

• PaywallProductHorizontalBlock and PaywallProductVerticalBlock: selectable product cards for a paywall, with a title, an amount, an optional amount headline (an AnnotatedString, e.g. "per month") and an optional promo tag.

• ClickableIcon: an icon on a tinted background, with an optional click action. It accepts a DrawableResource, a Painter or an ImageVector.

• ColorScheme.onBackgroundVariant: an extra color for secondary text, with light and dark values.

In your settings.gradle.kts file, add Maven Central to your repositories:

repositories {
    mavenCentral()
}

Then add the CzanBlocks dependency to your module:

• With version catalog, open libs.versions.toml:

[versions]
czanBlocks = "1.*.*" // Check latest version

[libraries]
czan-blocks = { group = "io.github.tweener", name = "czan-blocks", version.ref = "czanBlocks" }

Then in your module build.gradle.kts add:

dependencies {
    implementation(libs.czan.blocks)
}

• Without version catalog, in your module build.gradle.kts add:

dependencies {
    val czanBlocksVersion = "1.*.*" // Check latest version

    implementation("io.github.tweener:czan-blocks:$czanBlocksVersion")
}

The latest version is:

CzanBlocks is licensed under the Apache-2.0.