#Makepad Component

https://github.com/Project-Robius-China/makepad-component

A modern UI component library for Makepad, inspired by Longbridge's gpui-component.

#About Makepad

Makepad is a next-generation UI framework written in Rust, featuring:

• GPU-accelerated rendering - Custom shader-based drawing with SDF (Signed Distance Field)
• Cross-platform - Desktop (Windows, macOS, Linux), Mobile (iOS, Android), and Web (WebAssembly)
• Live design - Hot-reload DSL for rapid UI iteration
• High performance - Designed for demanding applications like IDEs and real-time tools

#Production Applications

These projects are developed under the Robius initiative, advancing cross-platform Rust GUI development.

#Features

#Components (v0.1.0)

• Button - Primary, Secondary, Danger, Ghost variants with sizes
• Checkbox - With label and indeterminate state
• Switch - Toggle switch with animations
• Radio - Radio button groups
• Divider - Horizontal/vertical separators
• Progress - Linear progress bar
• Slider - Single/Range mode, Vertical, Logarithmic scale, Disabled state
• Badge - Notification badges with variants
• Tooltip - Four positions with edge detection and auto-flip
• Input - Text input field

#Coming Soon

• Spinner
• Modal
• Dropdown
• Select
• And more...

#Installation

Add to your Cargo.toml:

1[dependencies]
2makepad-component = { git = "https://github.com/Project-Robius-China/makepad-component", branch = "main" }

#Usage

1use makepad_widgets::*;
2use makepad_component::*;
3
4live_design! {
5    use link::theme::*;
6    use link::widgets::*;
7    use makepad_component::*;
8
9    App = {{App}} {
10        ui: <Root> {
11            <Window> {
12                body = <View> {
13                    flow: Down, spacing: 20, padding: 20
14
15                    <MpButtonPrimary> { text: "Primary Button" }
16                    <MpCheckbox> { text: "Check me" }
17                    <MpSwitch> {}
18                    <MpSlider> { value: 50.0, min: 0.0, max: 100.0 }
19                }
20            }
21        }
22    }
23}

#Running the Demo

#Desktop

1# Clone the repository
2git clone https://github.com/Project-Robius-China/makepad-component
3cd makepad-component
4
5# Run the component zoo demo
6cargo run -p component-zoo

#Web (WebAssembly)

1# Install cargo-makepad (if not installed)
2cargo install --force --git https://github.com/makepad/makepad.git --branch rik cargo-makepad
3
4# Install wasm toolchain
5cargo makepad wasm install-toolchain
6
7# Build for web
8cargo makepad wasm build -p component-zoo --release
9
10# Serve locally (requires Python 3)
11python3 serve_wasm.py 8080
12# Open http://localhost:8080 in your browser

#AI-Assisted Development

This component library was built collaboratively with AI (Claude Code) using makepad-skills.

makepad-skills is a comprehensive set of Claude Code skills designed for Makepad development, covering widget creation, shader programming, and production-ready patterns.

#Inspiration

This project draws inspiration from Longbridge's gpui-component, a component library for the GPUI framework (used in Zed editor). While gpui-component targets GPUI, makepad-component brings similar design principles and component patterns to the Makepad ecosystem.

Key differences:

• Makepad uses live_design! DSL vs GPUI's Rust-only approach
• Makepad has built-in shader/animation system
• Makepad targets more platforms (including mobile/web)