Skip to content

README.md

Latest commit

 

History

History
126 lines (93 loc) · 4.18 KB

README.md

File metadata and controls

126 lines (93 loc) · 4.18 KB
Raw

Bevy Material UI Documentation

A comprehensive Material Design 3 component library for Bevy game engine.

Components

Component Description Documentation
Button Filled, outlined, and text buttons with state layers View
Card Elevated, filled, and outlined cards View
Checkbox Checkboxes with animation View
Chip Assist, filter, input, and suggestion chips View
Dialog Modal dialogs with actions View
Divider Horizontal and vertical dividers View
FAB Floating action buttons View
Icon Button Icon-only buttons View
List Lists with selection support View
Menu Dropdown menus View
Progress Linear and circular progress indicators View
Radio Radio button groups View
Select Dropdown select components View
Slider Range sliders View
Snackbar Toast notifications View
Switch Toggle switches View
Tabs Tab navigation View
Text Field Input fields with validation View
Tooltip Hover tooltips View
DateTime Picker Date and time picking dialogs View

Quick Start

Add to your Cargo.toml:

[dependencies]
bevy_material_ui = { path = "../bevy_material_ui" }

Basic setup:

use bevy::prelude::*;
use bevy_material_ui::prelude::*;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_plugins(MaterialUiPlugin)
        .add_systems(Startup, setup)
        .run();
}

fn setup(mut commands: Commands, theme: Res<MaterialTheme>) {
    commands.spawn(Camera2d::default());
    
    // Your UI here
}

Theme System

The library uses Material Design 3 color tokens. Access colors through MaterialTheme resource:

fn my_system(theme: Res<MaterialTheme>) {
    let primary = theme.primary;
    let surface = theme.surface;
    let on_primary = theme.on_primary;
    // etc.
}

Interactive Showcase

To see all components in action, run the interactive showcase:

cargo run --example showcase

The showcase provides a comprehensive demo of every component with:

  • Live interaction and state changes
  • Multiple variants and configurations
  • Theme switching (light/dark mode)
  • Responsive layout examples

Navigate through the sidebar to explore each component category.

Running Examples

Run the dedicated layout demo:

cargo run --example layouts_demo

Other examples are available in the examples/ folder:

cargo run --example button_demo
cargo run --example select_demo

Running Tests

Run the full test suite:

cargo test

UI Automated Tests (Telemetry)

The showcase can emit a telemetry.json file with element bounds and recent UI events for automation tooling. Enable it via an environment variable:

BEVY_TELEMETRY=1 cargo run --example showcase

The file is written to the project root as telemetry.json.

📺 Video Demo: For a walkthrough of the UI components, see the demo video (coming soon).