🦖 KAPLAY-UI 🧩

A lightweight and flexible UI plugin for KAPLAY, built to feel like a natural extension of the engine.

Create UI elements quickly using familiar KAPLAY primitives — buttons, labels, HUD elements, menus, and more.

🚀 Why KAPLAY-UI?

• 🧩 Works exactly like native KAPLAY
• 🎛️ Easy, declarative API
• ✨ Sensible styling defaults
• 🎨 Fully customizable

📦 Installation (v1.0.0-alpha*)

npm install kaplay-ui@next

🧰 Getting Started

Add the plugin when creating your KAPLAY instance:

import kaplay from "kaplay";
import kaplayUI from "kaplay-ui";

const k = kaplay({
  plugins: [kaplayUI],
});

Now create a UI element:

const tb = k.addTextButton("Play");
const sl = k.addLabel("Score: 0");

That’s it — you’re ready to build UI!

🧱 Core Components

🔤 Text Button

Create an interactive button with centered text and built‑in outline & area detection.

const tb = k.addTextButton("Play");

tb.onClick(() => k.go("game"));

🏷️ Label

A small, flexible text element — perfect for HUDs.

const lbl = k.addLabel("Score: 0");

lbl.setLabelText("Score: 1");

More components are being added soon as the plugin grows. 🎉

📚 Documentation

You can find more details here:

• 🔌 plugin API
  — How the plugin integrates into KAPLAY

• 🧱 Components API
  — All UI components and their options

• 📄 faq.md
  — Questions and answers

And soon also:

• 🧪 Examples
  — Learn by doing!

• 🪧 Demos
  — See it in action ..

• 🧠 design-decisions
  — The Whys?

🗺️ Roadmap (WIP)

• ⏳ More component types
  (sliders, toggles, panels)

• 🎨 Theme presets
  (built-in light/dark UI packs)

• 🎛️ Complex layout helpers
  (stacks, grids)

• 📘 Full documentation site
  (getting started, faq and .. more)

🤝 Contributing

Contributions and feature ideas are warmly welcome!

Feel free to submit issues or PRs on GitHub — or share ideas in the discussions tab.

📜 License

MIT © 2026 Jonas Bak Phillipson