Components
The Twilight Moon interface kit is the set of Vue components every Twilight Moon screen is built from: buttons, inputs, windows, menus, the admin panel shell, the map and more. Every example in this section is the real component running live, so you can click, type and drag.
Pages
| Page | What is in it |
|---|---|
| Buttons and inputs | Buttons, text inputs, selects, toggles, sliders, pickers, knobs and faders |
| Display and feedback | Badges, stats, meters, notices, tiles, tooltips, icons, empty states and the ID card and paper document |
| Overlays, tabs and admin | Windows, dialogs, menus, tabs, the confirm prompt, setting rows and the admin panel shell |
| Game fields, map and flow | Item, vehicle, zone, animation and other game pickers, the world map and the flow canvas |
How it is themed
Colors, fonts, radius and size are theme tokens (CSS variables), never hard coded. Server owners change them in game from the admin panel, and every interface follows with no rebuild. The previews on these pages use the default Twilight Moon theme. See Theme for the tokens.
Using the kit in your own resource
Resources scaffolded from the Twilight Moon boilerplate already import the kit as @/kit:
import { KWindow, KButton, confirm } from '@/kit'Use these components instead of hand written CSS so your screens match every other Twilight Moon interface and follow the server's theme. For simple forms, menus and panels you may not need a Vue build at all: tm.ui.window builds a screen from a Lua table.