MGuide — production app built with Konsta UI

[puppyum]

MGuide (mguide.app) is an interactive campus map for the University of Michigan, using Konsta UI for its entire component layer.

Konsta components used: App, Page, Sheet, List, ListItem, Toggle, Button, Chip, Card, Progressbar, Dialog. The app wraps everything in <App theme={platform} dark={isDarkMode}> with platform auto-detection (iOS on Apple devices, Material elsewhere).

A few things we learned along the way:

• Konsta brand colors must be hex in the theme block — OKLCH breaks the internal color pipeline
• Toggle checked state uses .k-toggle:has(input:checked) rather than a class — and its default inline-block breaks flex layouts (fixed with display: inline-flex !important)
• Dialog renders DOM even when opened={false} — wrapping with a conditional prevents phantom rendering
• On iOS, we apply backdrop-filter: blur(40px) saturate(1.8) to Konsta surfaces for a glass effect while Material uses opaque surfaces

Konsta made it possible to ship a native-feeling app on both iOS and Android without building two separate UIs.