Skip to main content
The --add command generates a specific UI component and its dependencies in your project.

​
Syntax

./gradlew lumo --add <ComponentName>

​
Parameters

​
ComponentName
string
required
The name of the component to add. Component names are case-sensitive.Use ./gradlew lumo --available-components to see all available components.

​
What It Does

The add command:
  1. Validates your lumo.properties configuration
  2. Checks that the component name is valid
  3. Generates the component file(s)
  4. Generates any supporting/dependency files
  5. For Kotlin Multiplatform, generates platform-specific files when needed

​
Available Components

Accordion

AlertDialog

Badge

Button

Card

Checkbox

Chip

Divider

Icon

IconButton

ModalBottomSheet

NavigationBar

OTPTextField

ProgressIndicators

RadioButton

Scaffold

Slider

Surface

Snackbar

Switch

SystemBars

Text

TextField

Theme

Tooltip

TopBar

​
Examples

​
Add a Button Component

./gradlew lumo --add Button
Output: 
Generating Button ...

Generated 'Button' files:
/path/to/project/app/src/main/java/com/example/ui/components/Button.kt

'Button' generated successfully.
Generated Files: 1
Scroll up to see the generated files.

​
Add a Card Component

./gradlew lumo --add Card
Output: 
Generating Card ...

Generated supporting files:
/path/to/project/app/src/main/java/com/example/ui/components/Surface.kt

Generated 'Card' files:
/path/to/project/app/src/main/java/com/example/ui/components/Card.kt

'Card' generated successfully.
Generated Files: 2
Scroll up to see the generated files.
Some components have dependencies on other components. These supporting files are automatically generated.

​
Add TextField with Dependencies

./gradlew lumo --add TextField
Output: 
Generating TextField ...

Generated supporting files:
/path/to/project/app/src/main/java/com/example/ui/components/Icon.kt

Generated 'TextField' files:
/path/to/project/app/src/main/java/com/example/ui/components/TextField.kt

'TextField' generated successfully.
Generated Files: 2
Scroll up to see the generated files.

​
Prerequisites

The plugin must be initialized and configured before adding components.
Required setup:
  1. Run ./gradlew lumo --init
  2. Configure lumo.properties
  3. Add required dependencies to build.gradle.kts
  4. Run ./gradlew lumo --setup to generate theme

​
Generated Code

Generated component files include:
  • Fully functional Compose components
  • Your configured package name
  • Integration with your theme (using ThemeName from config)
  • Material3 design patterns
  • Customizable parameters

​
Error Cases

Invalid Component Name
Invalid component name InvalidName. Find supported components: https://lumoui.com
Solution: Check spelling (case-sensitive) or run ./gradlew lumo --available-components
File Already Exists
Failed to generate some files as they already exist:
/path/to/Button.kt
Solution: The component already exists. Delete it to regenerate, or edit it directly.
Configuration Not Found
The plugin is not setup. Run the plugin with --init to get started.
Solution: Run initialization and setup first.

​
File Locations

Generated files are placed in the directory specified by ComponentsDir in your configuration: 
ComponentsDir/
├── Button.kt
├── Card.kt
├── TextField.kt
├── theme/
│   ├── Theme.kt
│   ├── Color.kt
│   └── Type.kt
└── ...

​
Kotlin Multiplatform Support

For Kotlin Multiplatform projects:
  • Common components are generated in commonMain
  • Platform-specific implementations go to androidMain, iosMain, etc.
  • The plugin automatically detects source sets based on your directory structure
Example output: 
Generated 'SystemBars' files:
/path/to/shared/src/commonMain/kotlin/com/example/ui/components/SystemBars.kt
/path/to/shared/src/androidMain/kotlin/com/example/ui/components/SystemBars.android.kt
/path/to/shared/src/iosMain/kotlin/com/example/ui/components/SystemBars.ios.kt

​
Using Generated Components

After generation, import and use components in your code: 
import com.example.ui.components.Button
import com.example.ui.components.Card
import com.example.ui.components.theme.MyAppTheme

@Composable
fun MyScreen() {
    MyAppTheme {
        Card {
            Button(onClick = { /* ... */ }) {
                Text("Click Me")
            }
        }
    }
}

​
Tips

Add Multiple ComponentsYou can run the command multiple times to add different components, or use add-all to add everything at once.
Check Component ListUse ./gradlew lumo --available-components to see all available components before adding them.
Customize After GenerationGenerated components are meant to be customized. Edit them to fit your design requirements.

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us