← All Workshops
MudEngine Part 5: Polished UI with dioxus-components
Step 11 / 11
Congratulations!
You replaced hand-rolled HTML with a real component library — in about 45 minutes.
What we achieved:
- Card — semantic container for the room description with header, separator, and content regions
- RoomCell — a custom component for grid cells, ready to show player indicators in multiplayer
- Button — a clickable D-pad that replaces typed navigation for most interactions
- Input — a styled command input that matches the other components
- Theme system — components use CSS variables, so switching colours or dark mode is a one-line change
The game engine is untouched. The same World, look(), and go() power the app. Only the UI layer changed — which is exactly the kind of refactoring real projects do when they adopt a design system.
On to Part 6, where we take this polished UI and make it multiplayer with WebSockets! 🏰
📚 What we learned
| Concept | How we used it |
|---|---|
dx components add | Pulling individual styled components into the project |
dioxus-primitives git dep | Adding the unstyled base library from GitHub |
mod components; | Declaring the auto-generated src/components/ module |
Card / CardHeader / CardContent | Structured content panels with theme styling |
RoomCell (custom) | Reusable grid cell with name and active props, extensible for multiplayer |
Button / ButtonVariant | Clickable actions with consistent theming |
Input | Themed form input with all standard event handlers |
Separator | Horizontal rule that respects the theme |
CSS modules + #[css_module] | Scoped component styles that don't leak |
Step 11 / 11