← All Workshops
MudEngine Part 5: Polished UI with dioxus-components
Step 1 / 11
From hand-rolled to component library
In Part 4 we built a working single-player Dioxus GUI with raw <div>, <input>, and inline CSS class names. The app works, but every piece of UI is hand-crafted — the grid cells, the description panel, the command input, the navigation.
In this part we polish the UI with dioxus-components, the official component library from the Dioxus team. It provides accessible, themeable components that you pull into your project with a single CLI command.
What we will add:
- Card — wraps the room description in a styled, structured panel
- RoomCell — a custom component for each grid cell, ready for player indicators in multiplayer
- Button — a D-pad of direction buttons so you can click to move instead of typing
- Input — a styled command input box
- Separator — visual dividers between sections
The game engine (World, Room, look(), go()) stays identical. Only the presentation layer changes.
Step 1 / 11