Building ProShape: A Tiny UI Library for Better Corners in Compose Multiplatform

2 min readApr 12, 2025

When I started building UIs with Jetpack Compose Multiplatform, I immediately loved how expressive and declarative it felt. But one thing was missing: those smooth, iOS-style corners that you often see in Dribbble shots or Figma mockups — the kind that give your UI that soft, polished look.

So I decided to build it myself.

Meet ProShape 🌀

ProShape is a small Kotlin Multiplatform library that brings iOS-inspired squircle corners to your Compose UI components. It’s:

Lightweight and minimal
Compatible with Android, iOS, and Desktop
Easy to use (Modifier.proShape() or ProShape.topRounded())
Published on Maven Central

The goal wasn’t to create a complex shape engine. It was to fix a small UX/UI gap and help Compose developers save time while polishing their interfaces.

Why Squircles?

Squircles are somewhere between a square and a circle. Apple has used them everywhere — app icons, UI elements, buttons — because they feel both geometric and organic. I wanted to bring that feeling into my Compose layouts.

While Compose already supports RoundedCornerShape, it feels too uniform and rigid. With ProShape, you can:

Control corners individually
Easily get soft, aesthetic results
Reuse shape presets for consistency

How It Works

ProShape exposes a bunch of helpers:

Modifier.proShape()                     // Rounded corners all around
ProShape.topRounded(30.dp)             // Only the top
ProShape.bottomStartRounded(16.dp)     // Specific corner

Behind the scenes, it uses a Shape class called ProSquircleShape that creates a custom Path for each shape.

It’s small, fast, and doesn’t require any special setup.

Demo app

Install It

ProShape is available on Maven Central:

With Version Catalog (libs.versions.toml):

[versions]
proshape = "1.0.0"

[libraries]
proshape = { module = "com.riadmahi:proshape", version.ref = "proshape" }

dependencies {
    implementation(libs.proshape)
}

Or with classic Gradle:

dependencies {
    implementation("com.riadmahi:proshape:1.0.0")
}

What’s Next?

ProShape is a starting point.

I’d love to explore more shapes, transitions, and integrations with design systems. If you’re interested in improving UI building in Compose — let’s connect. I’m always down to chat.

👉 github.com/riadmahi/ProShape

Thanks for reading 🙏 If you found this helpful, feel free to give it a star or share it with someone building Compose UIs.

Built with ❤️ by Riad Mahi

#Kotlin #JetpackCompose #ComposeMultiplatform #OpenSource #UIDesign