MudEngine Part 5: Polished UI with dioxus-components

Step 6 / 11

Wrap the description in a Card

The description panel currently is a plain <div> with some CSS. Let us wrap it in a Card — a structured container with a title region and content region.

Find this code in your src/main.rs — it is inside the App component, after the grid:

div {
    class: "description",
    "{world.read().look()}"
}

Replace it with:

mud-engine/src/main.rs

use crate::components::card::{Card, CardHeader, CardTitle, CardContent};
use crate::components::separator::Separator;

// ... inside App's rsx!, after the grid:

Card {
    CardHeader {
        CardTitle { "📍 Current Room" }
    }
    Separator { horizontal: true }
    CardContent {
        "{world.read().look()}"
    }
}

🎯 What changed

The Card component provides a consistent container with padding, background, and border radius from the theme. CardHeader and CardTitle give a semantic heading region. CardContent wraps the body text. A Separator draws a horizontal line between the title and the content.

The card now has the same visual weight as the grid — both feel like part of a unified design system.

Step 6 / 11

◀ Prev Next ▶