Skip to main content
The --available-components command displays a list of all components that can be added to your project.

​
Syntax

./gradlew lumo --available-components

​
What It Does

The command:
  1. Retrieves the list of all supported components from the template registry
  2. Displays each component name
  3. No configuration validation required
This command works even without lumo.properties configuration, making it useful for exploring components before initialization.

​
Output

When run, you’ll see: 
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

​
All Available Components

Accordion

Expandable content sections

AlertDialog

Modal dialog for alerts and confirmations

Badge

Small status indicators

Button

Standard clickable button

Card

Container for content grouping

Checkbox

Binary selection control

Chip

Compact elements for actions or info

Divider

Visual separator between content

Icon

Display icons from Material icons

IconButton

Button with icon only

ModalBottomSheet

Bottom sheet for modal content

NavigationBar

Bottom navigation bar

OTPTextField

One-time password input field

ProgressIndicators

Loading and progress indicators

RadioButton

Single selection from a group

Scaffold

Basic screen structure layout

Slider

Range selection control

Surface

Basic container with elevation

Snackbar

Temporary message at bottom

Switch

Toggle between on/off states

SystemBars

System status and navigation bars

Text

Styled text display

TextField

Text input field

Theme

Application theme configuration

Tooltip

Contextual help text

TopBar

Top app bar for navigation

​
Component Categories

Components for user input:
  • Button
  • Checkbox
  • Chip
  • IconButton
  • OTPTextField
  • RadioButton
  • Slider
  • Switch
  • TextField

​
Using Component Names

Component names are case-sensitive. Use the exact names shown in the output: 
# Correct
./gradlew lumo --add Button
./gradlew lumo --add TextField
./gradlew lumo --add AlertDialog

# Incorrect (will fail)
./gradlew lumo --add button
./gradlew lumo --add textfield
./gradlew lumo --add alertdialog
Component names must match exactly, including capitalization. Button works, but button does not.

​
When to Use

Use this command:
  • Before initialization - Explore available components
  • During planning - Decide which components you need
  • For reference - Check exact component names for the --add command
  • When learning - Discover what’s available in Lumo UI

​
No Configuration Required

Unlike most other commands, --available-components doesn’t require:
  • lumo.properties configuration
  • Plugin initialization
  • Dependency setup
This makes it perfect for exploration before committing to the plugin setup.

​
Component Details

For detailed information about each component:
  1. Add the component to your project
  2. Review the generated source code
  3. Check the component documentation
  4. Visit the official Lumo UI website

​
Example Workflow

# 1. See what's available
./gradlew lumo --available-components

# 2. Initialize if you decide to use Lumo
./gradlew lumo --init

# 3. Configure and setup
# Edit lumo.properties
./gradlew lumo --setup

# 4. Add specific components you identified
./gradlew lumo --add Button
./gradlew lumo --add Card
./gradlew lumo --add TextField

​
Platform Support

All components support:
Android (Jetpack Compose)
Kotlin Multiplatform (Compose Multiplatform)
Some components may have platform-specific implementations, particularly:
  • SystemBars - Platform-specific status and navigation bar handling
  • Navigation components - May have different behaviors per platform
  • Platform-specific UI patterns

​
Adding Components

After identifying components you want, use the add command: 
# Add individual components
./gradlew lumo --add ComponentName

# Or add all at once
./gradlew lumo --add-all

​
Component Dependencies

Some components depend on others:
  • Card requires Surface
  • TextField requires Icon
  • Many components require Theme
When you add a component, dependencies are automatically included.
The --add command automatically handles dependencies, so you don’t need to worry about the order of adding components.

​
Filtering Output

If you want to filter the list programmatically: 
# List all components
./gradlew lumo --available-components

# Filter for specific pattern (using grep)
./gradlew lumo --available-components | grep -i button

# Count total components
./gradlew lumo --available-components | grep -v "Available" | wc -l

​
Component Count

Currently, Lumo UI provides 26 components covering common UI patterns and Material Design 3 components.

​
Future Components

The component library is actively maintained. Check the Lumo UI website or GitHub repository for:
  • New component announcements
  • Upcoming components
  • Component requests
  • Feature updates

​
Next Steps

Run this command frequently to stay updated on newly available components as the library grows.

Build docs developers (and LLMs) love

Get started for freeTalk to us