← All Workshops

MudEngine Part 5: Polished UI with dioxus-components

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.