Comprehensive UI toolkit with 20+ production-ready components, built-in theming, accessibility, animated transitions, visual variants and size presets — ideal for consistent design systems and rapid prototyping.
A comprehensive Compose Multiplatform UI library with 30+ production-ready components for Android and iOS applications.
commonMain.dependencies {
implementation("com.pixamob:pixacompose:1.1.0")
}
dependencies {
implementation("com.pixamob:pixacompose:1.1.0")
}
PixaCompose includes 30+ components organized in categories:
InfoCard(
title = "Welcome",
description = "Get started with PixaCompose",
icon = Icons.Default.Info,
variant = BaseCardVariant.Elevated
)
ActionCard(
title = "Settings",
description = "Manage your preferences",
icon = Icons.Default.Settings,
trailingIcon = Icons.Default.ChevronRight,
onClick = { /* navigate */ }
)
Perfect for settings, choices, and options with full flexibility.
// With remote icon (perfect for profile settings)
SelectCard(
title = "7-8 hours",
description = "Recommended sleep",
iconUrl = "https://example.com/sleep-icon.png",
isSelected = selected == 0,
onClick = { selected = 0 }
)
// With vector icon
SelectCard(
title = "Dark Mode",
icon = Icons.Default.DarkMode,
isSelected = selected == 1,
onClick = { selected = 1 }
)
// Icon only mode
SelectCard(
icon = Icons.Default.Favorite,
isSelected = isLiked,
onClick = { isLiked = !isLiked }
)
MediaCard(
imageUrl = "https://example.com/image.jpg",
title = "Article Title",
subtitle = "Category",
description = "Article preview text",
onClick = { /* open article */ }
)
Row(horizontalArrangement = Arrangement.spacedBy(Spacing.Medium)) {
StatCard(
modifier = Modifier.weight(1f),
value = "42",
label = "Active",
trend = "+12%",
trendPositive = true
)
StatCard(
modifier = Modifier.weight(1f),
value = "85%",
label = "Success Rate"
)
}
ListItemCard(
title = "Notifications",
subtitle = "Push, Email, SMS",
leadingIcon = Icons.Default.Notifications,
trailingIcon = Icons.Default.ChevronRight,
onClick = { /* navigate */ }
)
FeatureCard(
title = "Fast Setup",
description = "Get started in minutes",
icon = Icons.Default.Speed,
iconBackgroundColor = AppTheme.colors.brandSurfaceSubtle
)
Row(horizontalArrangement = Arrangement.spacedBy(Spacing.Small)) {
CompactCard(title = "Health", icon = Icons.Default.FavoriteBorder)
CompactCard(title = "Fitness", icon = Icons.Default.FitnessCenter)
}
SummaryCard(
title = "Weekly Summary",
icon = Icons.Default.CalendarMonth,
items = listOf(
"Total" to "12",
"Completed" to "10",
"Success Rate" to "83%"
)
)
All cards support customization:
variant = BaseCardVariant.Elevated // Shadow (default for info)
variant = BaseCardVariant.Outlined // Border only
variant = BaseCardVariant.Filled // Solid background
variant = BaseCardVariant.Ghost // Subtle (default for list items)
padding = BaseCardPadding.Compact // 8dp
padding = BaseCardPadding.Small // 12dp
padding = BaseCardPadding.Medium // 16dp (default)
padding = BaseCardPadding.Large // 24dp
InfoCard(
title = "Custom",
backgroundColor = Color.Blue, // Optional override
variant = BaseCardVariant.Filled
)
@Composable
fun App() {
AppTheme(
isDarkTheme = isSystemInDarkTheme()
) {
// Your app content
MyScreen()
}
}
@Composable
fun App() {
val customFont = FontFamily(/* your font */)
AppTheme(
customFontFamily = customFont
) {
// Your app content with custom font
}
}
@Composable
fun MyComponent() {
// Colors
val brandColor = AppTheme.colors.brandContentDefault
val backgroundColor = AppTheme.colors.baseSurfaceDefault
// Typography
val titleStyle = AppTheme.typography.titleBold
val bodyStyle = AppTheme.typography.bodyRegular
// Spacing
val padding = Spacing.Medium
val gap = Spacing.Small
}
All components support skeleton loading:
InfoCard(
title = "Loading...",
isLoading = true // Shows skeleton loader
)
PixaImage(
source = PixaImageSource.Url(imageUrl),
contentDescription = "Image",
isLoading = isImageLoading
)
// Vector icon
PixaIcon(
source = IconSource.Vector(Icons.Default.Home),
contentDescription = "Home",
size = IconSize.Large,
tint = AppTheme.colors.brandContentDefault
)
// Remote URL icon
PixaIcon(
source = IconSource.Url("https://example.com/icon.png"),
contentDescription = "Logo",
size = 48.dp
)
// Painter icon
PixaIcon(
source = IconSource.Resource(painterResource(R.drawable.logo)),
contentDescription = "App Logo"
)
PixaImage(
source = PixaImageSource.Url("https://example.com/image.jpg"),
contentDescription = "Product Image",
modifier = Modifier.size(200.dp),
contentScale = ContentScale.Crop,
shape = RoundedCornerShape(12.dp),
enableCrossfade = true,
placeholder = painterResource(R.drawable.placeholder),
error = painterResource(R.drawable.error)
)
PixaImage supports rendering SVG files from your composeResources/files/ directory using Coil 3.
Setup Required:
Initialize Coil with SVG decoder in your app:
import coil3.ImageLoader
import coil3.compose.LocalImageLoader
import coil3.decode.SvgDecoder
import androidx.compose.runtime.CompositionLocalProvider
val imageLoader = ImageLoader.Builder(context)
.components { add(SvgDecoder.Factory()) }
.build()
CompositionLocalProvider(LocalImageLoader provides imageLoader) {
// Your app content
}
File Structure:
composeResources/
└── files/
└── icons/
└── faces/
└── icon.svg
Usage:
// Basic SVG rendering
PixaImage(
source = PixaImageSource.SvgFile("icons/faces/icon.svg"),
contentDescription = "Icon",
modifier = Modifier.size(32.dp)
)
// SVG with tinting
PixaImage(
source = PixaImageSource.SvgFile("icons/faces/icon.svg"),
contentDescription = "Icon",
modifier = Modifier.size(48.dp),
tint = Color.Blue
)
// SVG with custom content scale
PixaImage(
source = PixaImageSource.SvgFile("icons/logo.svg"),
contentDescription = "Logo",
modifier = Modifier.fillMaxWidth().height(100.dp),
contentScale = ContentScale.Fit
)
Features:
Res.readBytes(filePath)ColorFilterfiles/Note: Size is controlled purely by the modifier parameter. The width and height parameters in PixaImageSource.SvgFile are ignored.
@Composable
fun SettingsScreen() {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(Spacing.Tiny)
) {
ListItemCard(
title = "Profile",
subtitle = "Manage your account",
leadingIcon = Icons.Default.Person,
trailingIcon = Icons.Default.ChevronRight,
onClick = { }
)
ListItemCard(
title = "Notifications",
subtitle = "Push, Email, SMS",
leadingIcon = Icons.Default.Notifications,
trailingIcon = Icons.Default.ChevronRight,
onClick = { }
)
ListItemCard(
title = ,
subtitle = ,
leadingIcon = Icons.Default.Lock,
trailingIcon = Icons.Default.ChevronRight,
onClick = { }
)
}
}
For detailed documentation on each component, see COMPONENTS.md
Contributions are welcome! See CONTRIBUTING.md for guidelines.
Copyright 2025 PixaMob
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http:
Unless applicable law agreed to writing, software
distributed under the License distributed an BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express implied.
See the License the specific language governing permissions
limitations under the License.
Made with ❤️ by PixaMob
import androidx.compose.runtime.*
import com.pixamob.pixacompose.components.inputs.*
import com.pixamob.pixacompose.components.display.*
import com.pixamob.pixacompose.theme.AppTheme
fun MyApp() {
AppTheme {
Column(
modifier = Modifier
.fillMaxSize()
.padding(Spacing.Medium),
verticalArrangement = Arrangement.spacedBy(Spacing.Medium)
) {
// Card Components
InfoCard(
title = "Welcome to PixaCompose",
description = "Build beautiful UIs with ready-to-use components",
icon = Icons.Default.Info
)
// Text Input
var text by remember { mutableStateOf("") }
OutlinedTextField(
value = text,
onValueChange = { text = it },
label = "Email",
placeholder = "Enter your email"
)
// Action Button
PrimaryButton(
text = "Get Started",
onClick = { /* Handle click */ }
)
}
}
}
fun DashboardScreen() {
Column(
modifier = Modifier
.fillMaxSize()
.padding(Spacing.Medium),
verticalArrangement = Arrangement.spacedBy(Spacing.Medium)
) {
// Stats Row
Row(horizontalArrangement = Arrangement.spacedBy(Spacing.Medium)) {
StatCard(
modifier = Modifier.weight(1f),
value = "42",
label = "Total",
icon = Icons.Default.CheckCircle
)
StatCard(
modifier = Modifier.weight(1f),
value = "85%",
label = "Success",
trend = "+5%",
trendPositive = true
)
}
// Info Card
InfoCard(
title = "New Features",
description = "Check out the latest updates",
icon = Icons.Default.Info
)
// Action Card
ActionCard(
title = "Settings",
description = "Manage preferences",
icon = Icons.Default.Settings,
trailingIcon = Icons.Default.ChevronRight,
onClick = { /* navigate */ }
)
}
}
Surfaced from shared tags and platforms — no rankings paid for.