General Questions
What is Lumo UI?
What is Lumo UI?
How is Lumo UI different from Material3 or other UI libraries?
How is Lumo UI different from Material3 or other UI libraries?
- Full Control: You own the code and can customize it completely
- No Dependencies: Components become part of your codebase
- No Version Lock-in: Update components independently
- Learning Tool: See how components are implemented
- Copy-Paste Workflow: Similar to shadcn/ui for React
Does Lumo UI support Kotlin Multiplatform?
Does Lumo UI support Kotlin Multiplatform?
- Android-only projects: Standard Android Compose projects
- Kotlin Multiplatform projects: Compose Multiplatform with support for Android, iOS, Desktop, Web (JS/Wasm), and macOS
lumo.properties:Is Lumo UI free to use?
Is Lumo UI free to use?
Can I use Lumo UI in production?
Can I use Lumo UI in production?
- Modify them as needed
- Fix bugs directly
- Add features
- Maintain them like any other code
Installation & Setup
How do I install Lumo UI?
How do I install Lumo UI?
- Add the plugin to your root
build.gradle.kts:
- Initialize the plugin:
-
Configure
lumo.propertieswith your project details - Add required dependencies (shown during init)
- Setup theme:
What are the minimum requirements?
What are the minimum requirements?
- Gradle: 7.0 or higher
- Kotlin: 1.9.0 or higher
- Compose: 1.5.0 or higher (Android) or Compose Multiplatform 1.5.0+
- Java: JDK 11 or higher
Do I need to add the plugin to every module?
Do I need to add the plugin to every module?
lumo.properties, which can be in any module.Can I use Lumo UI with an existing project?
Can I use Lumo UI with an existing project?
- Install the plugin
- Point
ComponentsDirto your existing UI package - Generate components
Component Generation
How do I generate a component?
How do I generate a component?
What components are available?
What components are available?
- Accordion
- AlertDialog
- Badge
- Button
- Card
- Checkbox
- Chip
- Divider
- Icon
- IconButton
- ModalBottomSheet
- NavigationBar
- OTPTextField
- ProgressIndicators (Linear and Circular)
- RadioButton
- Scaffold
- Slider
- Surface
- Snackbar
- Switch
- SystemBars
- Text
- TextField (Standard, Outlined, Underlined)
- Theme
- Tooltip
- TopBar
./gradlew lumo --available-components for the latest list.Can I regenerate a component after modifying it?
Can I regenerate a component after modifying it?
- Backup your changes (if any)
- Delete the component file(s)
- Run the generation command again
- Manually merge your changes if needed
How do component dependencies work?
How do component dependencies work?
- Resolves all dependencies
- Generates supporting files
- Creates foundation classes (like Elevation, Ripple)
Button automatically includes:ButtonElevation.ktElevation.ktRipple.kt
What files are generated when I add a component?
What files are generated when I add a component?
- The component itself (e.g.,
Button.kt)
- Foundation classes (elevation, ripple, etc.)
- Helper classes and utilities
- Default configurations
Tooltip.android.ktTooltip.ios.ktTooltip.desktop.kt- etc.
Configuration
Where is the configuration file?
Where is the configuration file?
lumo.properties in your project root directory. This file is created when you run ./gradlew lumo --init.What do I need to configure?
What do I need to configure?
Can I change the configuration after initialization?
Can I change the configuration after initialization?
lumo.properties with your new values. Changes take effect immediately for the next command.If you change ComponentsDir or PackageName, you may want to:- Create the new directory structure
- Move existing generated files
- Update imports in your code
Why does my directory path need to match the package name?
Why does my directory path need to match the package name?
Customization
Can I customize generated components?
Can I customize generated components?
- Modify styling
- Add new parameters
- Change behavior
- Remove features you don’t need
- Combine with other components
Will my customizations be overwritten?
Will my customizations be overwritten?
Can I change the theme name after generation?
Can I change the theme name after generation?
- Update
ThemeNameinlumo.properties - Manually rename the theme function in existing generated files
- Update imports/usages throughout your codebase
- Update
ThemeNameinlumo.properties - Delete existing components
- Regenerate all components
How do I change component colors or styles?
How do I change component colors or styles?
Color.kt and Theme.kt. To customize:- Global changes: Edit
Color.ktto change your color scheme - Theme changes: Edit
Theme.ktto modify theme behavior - Component-specific: Edit the component file directly
Multiplatform
How do I enable Kotlin Multiplatform support?
How do I enable Kotlin Multiplatform support?
KotlinMultiplatform=true in lumo.properties:- Your
ComponentsDirpoints to acommonMaindirectory - You have the Compose Multiplatform plugin applied
- Platform source sets are configured in
build.gradle.kts
What platforms does Lumo UI support?
What platforms does Lumo UI support?
KotlinMultiplatform=true, components are generated for:- commonMain: Shared code for all platforms
- androidMain: Android-specific implementations
- iosMain: iOS-specific implementations
- desktopMain: Desktop (JVM) implementations
- jsMain: JavaScript implementations
- wasmJsMain: WebAssembly implementations
- macosMain: macOS-specific implementations
Do I need platform-specific files for every component?
Do I need platform-specific files for every component?
- Tooltip (different behavior on mobile vs desktop)
- FontScaleConfig (platform-specific font handling)
Can I use Lumo UI in a multimodule multiplatform project?
Can I use Lumo UI in a multimodule multiplatform project?
lumo.properties:Dependencies
What dependencies does Lumo UI require?
What dependencies does Lumo UI require?
- Compose BOM
- Compose Foundation
- Compose UI
- Material Ripple
- Compose Runtime
- Compose Foundation
- Compose Material3
- Compose UI
Do generated components depend on the Lumo plugin at runtime?
Do generated components depend on the Lumo plugin at runtime?
- Remove the plugin from your
build.gradle.kts - Use components without the plugin
- Distribute components to other projects
Can I use different Compose versions?
Can I use different Compose versions?
- Android: Use the Compose BOM to manage versions. Components are compatible with recent Compose versions (1.5.0+)
- Multiplatform: Ensure your Compose Multiplatform version is compatible
Troubleshooting
Why am I getting 'Plugin not found' error?
Why am I getting 'Plugin not found' error?
Generated files show import errors in my IDE
Generated files show import errors in my IDE
- Sync Gradle: File → Sync Project with Gradle Files
- Invalidate caches: File → Invalidate Caches → Invalidate and Restart
- Mark directory as source root: Right-click directory → Mark Directory as → Sources Root
- Rebuild: Build → Rebuild Project
Components look different than the documentation
Components look different than the documentation
- Generated components with an older plugin version
- Customized components after generation
- Use a different theme
Where can I get help?
Where can I get help?
- Documentation: https://lumoui.com
- GitHub Issues: https://github.com/nomanr/lumo-ui/issues
- Examples: Check the
sample-androidandsample-multiplatformdirectories in the repository
Contributing
Can I contribute to Lumo UI?
Can I contribute to Lumo UI?
- Report bugs
- Suggest new components
- Improve existing components
- Fix issues
- Improve documentation
How do I request a new component?
How do I request a new component?
- Go to https://github.com/nomanr/lumo-ui/issues
- Click “New Issue”
- Describe the component you’d like
- Include examples or mockups if possible
Can I submit my own component?
Can I submit my own component?
- Create the component in
lumo-ui/components-lab/ - Add it to
SupportedComponentsenum - Create templates
- Add to the template registry
- Test thoroughly
- Submit a pull request
Advanced Usage
Can I modify the component templates?
Can I modify the component templates?
- Generate the component
- Modify the generated code
- Use it as your custom template
- Forking the plugin repository
- Modifying templates in the source
- Building your own version
- Or contributing improvements upstream
Can I use Lumo UI with Jetpack Compose for Desktop only?
Can I use Lumo UI with Jetpack Compose for Desktop only?
KotlinMultiplatform=true in lumo.properties.How do I create a custom component library with Lumo?
How do I create a custom component library with Lumo?
- Create a dedicated module for UI components
- Configure Lumo to generate into that module
- Generate all needed components
- Customize as needed
- Publish the module as a library
Can I use Lumo in a project with both Material2 and Material3?
Can I use Lumo in a project with both Material2 and Material3?
- Use Lumo components alongside Material2
- Explicitly import from the correct package
- Gradually migrate from Material2 to Material3