Skip to main content
This guide will walk you through setting up Lumo UI and generating your first component.

​
Before you begin

Make sure you’ve installed the plugin in your project.

​
Step 1: Initialize the plugin

Run the initialization command to create the configuration file:
Terminal
./gradlew lumo --init
This creates a lumo.properties file in your project root with the following structure:
lumo.properties
# Lumo UI Plugin
# This file is used to store configurations for the Lumo UI Plugin
# Do not delete this file

ThemeName=AppTheme

# For Android projects:
ComponentsDir=app/src/main/java/com/example/myapp/ui
PackageName=com.example.myapp.ui

# For Kotlin Multiplatform projects:
# ComponentsDir=shared/src/commonMain/kotlin/com/example/myapp/ui
# PackageName=com.example.myapp.ui
# KotlinMultiplatform=true
1

Configure your project paths

Edit the lumo.properties file to match your project structure:
ThemeName=AppTheme
ComponentsDir=app/src/main/java/com/example/myapp/ui/components
PackageName=com.example.myapp.ui.components
The ComponentsDir should be an absolute or relative path from your project root. The plugin will create this directory if it doesn’t exist.
2

Setup the theme

Generate the theme files (colors, typography, and theme configuration):
Terminal
./gradlew lumo --setup
This creates three files in your components directory:
  • Color.kt - Color palette with light and dark mode support
  • Typography.kt - Typography scale and text styles
  • Theme.kt - Main theme composable with AppTheme wrapper
The setup command also validates your configuration and ensures all paths are correct.
3

Add your first component

Generate your first component. Let’s start with a Button:
Terminal
./gradlew lumo --add Button
This creates Button.kt in your components directory with:
  • Multiple button variants (Primary, Secondary, Destructive)
  • Different styles (Filled, Outlined, Elevated, Ghost)
  • Disabled states
  • Loading support
  • Full customization options
To see all available components, run:
./gradlew lumo --available-components
4

Use the component

Import and use the generated component in your Compose UI:
MainActivity.kt
import androidx.compose.runtime.Composable
import com.example.myapp.ui.components.AppTheme
import com.example.myapp.ui.components.Button
import com.example.myapp.ui.components.ButtonVariant

@Composable
fun MyScreen() {
    AppTheme {
        Button(
            text = "Click me",
            variant = ButtonVariant.Primary,
            onClick = { /* Handle click */ }
        )
    }
}

​
Command reference

Here are the most common Lumo UI commands: 
./gradlew lumo --init

​
Example output

When you add a component, you’ll see output similar to this:
Terminal output
> Task :lumo
✓ Configuration validated successfully
✓ Generating Button component...
✓ Button.kt created at app/src/main/java/com/example/myapp/ui/components/Button.kt
✓ Component generated successfully

BUILD SUCCESSFUL in 2s

​
Customize components

Since components are copied into your project, you have full control to modify them:
Button.kt
// Modify the default button shape
internal object ButtonDefaults {
    internal val MinHeight = 44.dp
    private val ButtonShape = RoundedCornerShape(12)  // Change to 8 or any value
    
    val contentPadding = PaddingValues(
        start = 16.dp,  // Adjust padding
        top = 8.dp,
        end = 16.dp,
        bottom = 8.dp,
    )
}
If you regenerate a component that you’ve already customized, it will be overwritten. Make sure to back up your changes or commit them to version control first.

​
Available components

Lumo UI provides 30+ production-ready components:

Accordion

AlertDialog

Badge

Button

Card

Checkbox

Chip

Divider

Icon

IconButton

ModalBottomSheet

NavigationBar

OTPTextField

ProgressIndicators

RadioButton

Scaffold

Slider

Snackbar

Surface

Switch

SystemBars

Text

TextField

Tooltip

TopBar

​
Next steps

Components

Explore all available components and their usage

Theming

Customize colors, typography, and theme configuration

Configuration

Learn about advanced configuration options

Examples

See real-world examples and patterns

Build docs developers (and LLMs) love

Get started for freeTalk to us