One royal grammar.
Two skins. Every game.
The Midnight Court UI kit for Capacitor mobile games: docks that weld to the edges, ribbons with real wings, controlled tab navigation, and semantic controls that retain native browser behavior. Graphical-first React components. Your application keeps the state and logic.
Install
pnpm add @objectifthunes/royal-games-uiUse
import "@objectifthunes/royal-games-ui/tokens.css";
import { SkinProvider, Button, Ribbon } from "@objectifthunes/royal-games-ui";
export function App() {
return (
<SkinProvider defaultSkin="enamel">
<Ribbon size="large">Victory!</Ribbon>
<Button tone="positive" size="hero" width="wide">CONTINUE</Button>
</SkinProvider>
);
}Explore
Six full phone screens composed purely from package components. 7 pages.
FoundationsSkins and motion.
ActionsThe raised enamel actions.
BannersRibbons and their card placements. 3 pages.
PanelsRaised frames, recessed wells, welded docks. 3 pages.
TextWordmarks, kickers and price text. 4 pages.
LayoutThe screen shell and its chrome. 5 pages.
NavigationThe royal tab bar. 2 pages.
ScenePainted worlds and level pins. 2 pages.
ResourcesCurrencies, badges and identity glyphs. 11 pages.
ControlsMeters, rings and form controls. 9 pages.
FeedbackAnnouncements, dialogue and rewards. 9 pages.
CommerceStore rows, packs and bundles. 4 pages.
SocialIdentity, leaderboards and settings rows. 4 pages.