JetCo A ready-to-go Compose library building a @codeKK AndroidOpen Source Website

JetCo

Project Url: developerchunk/JetCo

Introduction: A ready-to-go Compose library building awesome UI components!

More: Author ReportBugs

Tags:

# 🚀 JetCo Library

License

---

🎯 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 | Status | Description | Target API | |:--------:|:------:|:------------|:----------:| |

| ✅ Full Support | High-performance WebAssembly applications | WASM 1.0 |

### 🎯 Platform Highlights

Material Design 3
_{Native performance & gestures}

Native iOS Feel
_{Cupertino design system}

Cross-platform UI
_{Windows, macOS, Linux}

Modern Web Apps
_{PWA ready, responsive}

## 🚀 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:

kotlin
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:

kotlin
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
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

### 📈 Charts & Data Visualization | Component | Description | Platforms | Status | |:----------|:------------|:---------:|:------:| | 🥧 Pie Chart | Interactive pie charts with customizable slices and animations |

| ✅ | ### 🎴 Cards & Layout | Component | Description | Platforms | Status | |:----------|:------------|:---------:|:------:| | 🎟️ Ticket Card | Cinema-style cards with cutout design and dashed dividers |

| ✅ | ### 🔄 Navigation & Progress | Component | Description | Platforms | Status | |:----------|:------------|:---------:|:------:| | ⬇️ Vertical Stepper | Timeline-style stepper with images and descriptions |

| ✅ | ### 🎛️ Interactive Controls | Component | Description | Platforms | Status | |:----------|:------------|:---------:|:------:| | 🔘 Switch Button | Animated toggle switch with custom styling |

| ✅ |

🚧 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

kotlin
// 🌍 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

kotlin
@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

kotlin
@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

kotlin
@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

kotlin
@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

Write Once, Run Everywhere _{Single codebase for Android, iOS, Web, Desktop & WASM}	Blazing Performance _{Optimized for smooth 60fps animations}	Stunning Components _{Pixel-perfect design with Material 3}
Zero Learning Curve _{Intuitive API, comprehensive docs}	Highly Flexible _{Theme every component to match your brand}	Always Updated _{Regular updates with latest Compose features}

### 🎯 Perfect For

## 🚀 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!

### 💝 Show Some Love

If JetCo helped you build something amazing, consider:

⭐ Starring the repo • 🐦 Sharing on Twitter • 💼 Sharing on LinkedIn

_{Made with ❤️ by the JetCo team}

Apps

Android Developer Tools

Android Developer Tools Pro

About Me

Tools: TimeShining

GitHub: Trinea

Facebook: Dev Tools

JSON Format, Support error correction

MD5/SHA Encode, Support batch

Text Process

CSS Format and Compress