npm
@objectifthunes/royal-games-ui

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.

Midnight Court
2,450
12
2d 4h
See the six full screens →

Lobby, map, shop, victory, leaderboard, and settings compositions, live and animated from the published package.

Install

pnpm add @objectifthunes/royal-games-ui

Use

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