MudEngine Part 5: Polished UI with dioxus-components

Step 3 / 11

Add dioxus-components to your project

Open the mud-engine project from Part 4. The Dioxus CLI handles the entire setup — it adds the primitives dependency, copies the styled component source files, and links the theme stylesheet.

First, ensure your local component registry is up to date:

Update the component registry

dx components update

📦 Why update?

The CLI caches the component registry locally in ~/.dx/components/ and never automatically refreshes it. If a component was added to the upstream repository after your last fetch, dx components add will report "not found in registry". Running dx components update fetches the latest registry data.

After updating, pull in each component one at a time:

Add Card component

dx components add card

Add Button component

dx components add button

Add Input component

dx components add input

Add Separator component

dx components add separator

📁 After the commands

The first run will prompt: "Would you like to link /assets/dx-components-theme.css?" — answer y (yes). This links the theme stylesheet that provides CSS variables for colours, spacing, and dark mode support.

Your project structure should now look like this:

mud-engine/
├── Cargo.toml          # now has dioxus-primitives dep (added automatically)
├── assets/
│   ├── main.css
│   └── dx-components-theme.css   # theme stylesheet
└── src/
    ├── components/         # <-- created by dx components add
    │   ├── button/
    │   ├── card/
    │   ├── input/
    │   ├── separator/
    │   └── mod.rs           # auto-generated module declarations
    └── main.rs

You can browse the generated source — each component is a regular Rust file with a #[component] function and a #[css_module] attribute for the scoped stylesheet.

⚠️ Version compatibility

The underlying dioxus-primitives crate is installed from the Git repository and may require a specific Dioxus version (the components repo pins dioxus = "0.7.8"). If dx components add fails with a version resolution error, ensure your Cargo.toml uses a matching Dioxus version:

dioxus = { version = "0.7.8", features = ["web"] }

Then run cargo update before retrying dx components add.

Step 3 / 11

◀ Prev Next ▶