GitHub - AndroidSourceTools/JetCo: A ready-to-go Compose library building awesome UI components!

🎯 Your Ultimate Compose Companion

JetCo is a ready-to-go Compose library building awesome UI components for both Android and KMP (Kotlin Multiplatform). 💡

✨ Beautiful • ⚡ Fast • 🌍 Cross-Platform • 🎨 Customizable

Your ultimate Open-Source partner for crafting visually stunning, interactive, and efficient UI components across multiple platforms including Android, iOS, JVM, JS, and WASM. Designed specifically for Jetpack Compose enthusiasts, JetCo is here to make your life easier, your apps prettier, and your users happier. 😊

🚧 KMP Documentation Pipeline: Full Kotlin Multiplatform documentation is currently in development and will be live soon! For now, KMP projects work identically to Android projects with the same component functionality and API. The only differences are the Gradle implementation and import statements shown below. Stay tuned! 🚀

�️ Repository Structure

Understanding the JetCo ecosystem at a glance

graph TB
    A("JetCo Root Repository") --> B("JetCoKMP")
    A --> C("jetco-android")
    A --> D("assets")
    A --> E("LICENSE & README")
    
    B --> B1("composeApp")
    B --> B2("jetco - KMP Library")
    B --> B3("iosApp")
    B --> B4("gradle")
    
    B1 --> B1a("androidMain")
    B1 --> B1b("commonMain")
    B1 --> B1c("iosMain")
    B1 --> B1d("jvmMain")
    B1 --> B1e("jsMain")
    B1 --> B1f("wasmJsMain")
    
    B2 --> B2a("commonMain")
    B2 --> B2b("androidMain")
    B2 --> B2c("iosMain")
    B2 --> B2d("jvmMain")
    B2 --> B2e("Tests")
    
    B2a --> B2a1("Charts")
    B2a --> B2a2("Cards")
    B2a --> B2a3("Steppers")
    B2a --> B2a4("Controls")
    
    C --> C1("JetCoLibrary")
    C1 --> C1a("app")
    C1 --> C1b("jetco/ui")
    C1 --> C1c("assets/images")
    C1 --> C1d("gradle & build")
    
    C1b --> C1b1("Charts")
    C1b --> C1b2("Cards")
    C1b --> C1b3("Steppers")
    C1b --> C1b4("Controls")
    
    D --> D1("images")
    
    %% Styling with light blue theme, blue borders, and increased spacing
    classDef default fill:#E3F2FD,stroke:#1976D2,stroke-width:2px,color:#000000,rx:15,ry:15
    classDef rootStyle fill:#BBDEFB,stroke:#0D47A1,stroke-width:3px,color:#000000,rx:15,ry:15
    classDef kmpStyle fill:#E1F5FE,stroke:#0277BD,stroke-width:2px,color:#000000,rx:15,ry:15
    classDef androidStyle fill:#E8F5E8,stroke:#2E7D32,stroke-width:2px,color:#000000,rx:15,ry:15
    classDef libraryStyle fill:#FFF3E0,stroke:#E65100,stroke-width:2px,color:#000000,rx:15,ry:15
    classDef componentStyle fill:#F3E5F5,stroke:#6A1B9A,stroke-width:2px,color:#000000,rx:15,ry:15
    
    class A rootStyle
    class B,B1,B2,B3,B4 kmpStyle
    class C,C1,C1a,C1c,C1d androidStyle
    class B2a,B2b,B2c,B2d,C1b libraryStyle
    class B2a1,B2a2,B2a3,B2a4,C1b1,C1b2,C1b3,C1b4 componentStyle

🎨 JetCo in Action

✨ See the magic happen across all platforms! ✨

🥧 Pie Chart _{Interactive data visualization}	📊 Column Bar Chart _{Beautiful data bars}	🔥 Extended Bar Chart _{Advanced features}	🤓 Group Bar Chart _{Multi-dataset comparison}
🎟️ Ticket Card _{Custom card design}	⬇️ Vertical Stepper _{Timeline progression}	➡️ Horizontal Stepper _{Step-by-step progress}	🔘 Switch Button _{Animated interactions}
📏 Compact Horizontal Stepper _{Space-efficient progress}	🃏 Curved Card _{Elegant curved corners}	🎨 Curved Card _{Creative card layouts}

🌍 Platform Support

Write once, run everywhere! JetCo supports all major platforms through Kotlin Multiplatform

🎯 Platform Highlights

🚀 Installation

Get started in minutes! Choose your platform and follow the simple setup

📱 For Android - Jetpack Compose Projects

Click to expand Android setup

Add this to your module's build.gradle.kts:

dependencies {
    implementation("com.developerstring.jetco:ui:1.0.0-beta.7")
}

🌍 For Kotlin Multiplatform Projects

🔥 Recommended - KMP Setup (Click to expand)

Add this to your commonMain dependencies in build.gradle.kts:

commonMain.dependencies {
    implementation("com.developerstring.jetco-kmp:ui:1.0.0-beta.8")
}

⚡ Quick Start: Use the same component examples below for both Android Native and Kotlin Multiplatform! All functionality is identical.

🛠️ Complete KMP Setup Example

Full configuration example

kotlin {
    // Android target
    androidTarget {
        compilations.all {
            kotlinOptions {
                jvmTarget = "1.8"
            }
        }
    }
    
    // iOS targets
    listOf(
        iosX64(),
        iosArm64(),
        iosSimulatorArm64()
    ).forEach { iosTarget ->
        iosTarget.binaries.framework {
            baseName = "ComposeApp"
            isStatic = true
        }
    }
    
    // Desktop target
    jvm("desktop")
    
    // Web target
    js(IR) {
        moduleName = "composeApp"
        browser {
            commonWebpackConfig {
                outputFileName = "composeApp.js"
            }
        }
        binaries.executable()
    }
    
    // WASM target
    wasmJs {
        moduleName = "composeApp"
        browser {
            commonWebpackConfig {
                outputFileName = "composeApp.js"
            }
        }
        binaries.executable()
    }

    sourceSets {
        commonMain.dependencies {
            implementation(compose.runtime)
            implementation(compose.foundation)
            implementation(compose.material3)
            implementation(compose.ui)
            implementation(compose.components.resources)
            
            // 🎨 Add JetCo KMP
            implementation("com.developerstring.jetco-kmp:ui:1.0.0-beta.8")
        }
        
        androidMain.dependencies {
            implementation(libs.compose.ui.tooling.preview)
            implementation(libs.androidx.activity.compose)
        }
        
        iosMain.dependencies {
            // iOS specific dependencies
        }
        
        desktopMain.dependencies {
            implementation(compose.desktop.currentOs)
        }
    }
}

📊 UI Components Gallery

🎨 Rich, customizable components for every need

🚧 Coming Soon: Date Pickers, Floating Action Buttons, Bottom Sheets, and more!

🚀 Getting Started

⚡ From zero to awesome in 5 minutes!

🎯 Quick Start

📦 Import Components

📝 Import statements for different setups

// 🌍 For KMP projects (Recommended)
import com.developerstring.jetco_kmp.charts.piechart.PieChart
import com.developerstring.jetco_kmp.cards.ticket.TicketCard
import com.developerstring.jetco_kmp.cards.curved.CurvedCard
import com.developerstring.jetco_kmp.components.stepper.VerticalStepper
import com.developerstring.jetco_kmp.components.button.SwitchButton

// 🤖 For Android-only projects  
import com.developerstring.jetco.ui.charts.piechart.PieChart
import com.developerstring.jetco.ui.cards.ticket.TicketCard
import com.developerstring.jetco.ui.cards.curved.CurvedCard
import com.developerstring.jetco.ui.components.stepper.VerticalStepper
import com.developerstring.jetco.ui.components.button.SwitchButton

💡 Note: All components have identical functionality and API across both Android and KMP versions. Only the import path and Gradle dependency differ!

🎨 Few Quick Examples

Pie Chart

@Composable
fun MyAwesomeScreen() {
    // 🎨 Use any JetCo component across all platforms!
    PieChart(
        data = listOf(
            PieChartData(
                label = "Android", 
                value = 40f, 
                color = Color(0xFF3DDC84)
            ),
            PieChartData(
                label = "iOS", 
                value = 30f, 
                color = Color(0xFF007AFF)
            ), 
            PieChartData(
                label = "Web", 
                value = 20f, 
                color = Color(0xFFFF6B35)
            ),
            PieChartData(
                label = "Desktop", 
                value = 10f, 
                color = Color(0xFFFFD23F)
            )
        ),
        modifier = Modifier
            .size(300.dp)
            .padding(16.dp),
        animationDuration = 1000,
        showLabels = true,
        centerText = "JetCo"
    )
}

Ticket Card

@Composable
fun TicketExample() {
    TicketCard(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        backgroundColor = Color(0xFF6200EE),
        cornerRadius = 16.dp,
        cutoutRadius = 24.dp
    ) {
        Column(
            modifier = Modifier.padding(20.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "🎬 Movie Ticket",
                style = MaterialTheme.typography.headlineSmall,
                color = Color.White
            )
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                text = "JetCo: The Movie",
                style = MaterialTheme.typography.bodyLarge,
                color = Color.White.copy(alpha = 0.8f)
            )
        }
    }
}

Curved Card

@Composable
fun CurvedCardExample() {
    CurvedCard(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        backgroundColor = Color(0xFF673AB7),
        cornerRadius = 20.dp,
        curveHeight = 40.dp,
        curvePosition = CurvePosition.TOP_CENTER,
        shadowElevation = 8.dp
    ) {
        Column(
            modifier = Modifier.padding(24.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Icon(
                imageVector = Icons.Default.Star,
                contentDescription = "Premium",
                tint = Color(0xFFFFD700),
                modifier = Modifier.size(48.dp)
            )
            Spacer(modifier = Modifier.height(16.dp))
            Text(
                text = "Premium Membership",
                style = MaterialTheme.typography.headlineSmall,
                color = Color.White,
                textAlign = TextAlign.Center
            )
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                text = "Unlock exclusive features with our curved card design",
                style = MaterialTheme.typography.bodyMedium,
                color = Color.White.copy(alpha = 0.9f),
                textAlign = TextAlign.Center
            )
        }
    }
}

Animated Switch Button

@Composable
fun SwitchExample() {
    var isChecked by remember { mutableStateOf(false) }
    
    SwitchButton(
        checked = isChecked,
        onCheckedChange = { isChecked = it },
        modifier = Modifier.padding(16.dp),
        colors = SwitchButtonColors(
            checkedColor = Color(0xFF4CAF50),
            uncheckedColor = Color(0xFFE0E0E0),
            thumbColor = Color.White
        ),
        animationDuration = 300
    )
}

📚 Learn More

🔥 Coming Soon: Dedicated KMP documentation with platform-specific examples and deployment guides!

� Why Choose JetCo?

🚀 The ultimate developer experience

🚀 What Makes JetCo Special?

✨ The features that set us apart

Feature	Description	Benefit
🌐 Kotlin Multiplatform	One codebase for Android, iOS, Web, Desktop, and WASM	50% less development time
🖌️ Modern UI Components	Charts, cards, steppers with beautiful animations	Professional look out-of-the-box
⚡ Compose Integration	Seamless with Jetpack Compose and Compose Multiplatform	Native performance everywhere
🛠️ Infinite Customization	Theme every pixel to match your brand identity	Unique, branded experiences
🚀 Performance Optimized	Lightweight, efficient, 60fps smooth animations	Happy users, better retention
📱 Platform-Specific	Tailored experiences respecting platform conventions	Feels native on every platform
🔄 Future-Ready	Built for the next generation of Compose	Investment protection
🆓 Open Source	MIT licensed, community-driven development	Free forever, transparent

🤝 Join the JetCo Community

🌟 Be part of something amazing!

🎉 Contributors Welcome!

We're always looking for passionate developers to join our mission of making beautiful UI accessible to everyone.

Check out our Contributing Guide and Good First Issues!