Overview
This project is a growing playground for small, focused UI elements. Each component is built to be lightweight, reusable, and easy to drop into any project — whether that's a traditional web app, a game menu, or an embedded interface.
The goal is simple: build once, use everywhere.
Rather than maintaining separate UI kits for web and game projects, every component lives side-by-side here: same props, same styling approach, same documentation. Once a pattern proves itself, it gets promoted into the products that need it.
Progress Bar
A flexible progress bar component for health bars, XP bars, loading indicators, or anywhere you need to show progress.
- Pass any
valueand optionalmax - Add a
labelfor context - Show or hide the numeric value with
showValue - Works with any CSS background or gradient
Usage example:
<ProgressBar label="Player Health" value={72} max={100} />
<ProgressBar label="Loading Assets" value={80} max={100} />How it's built: Read the ProgressBar blog post
Button Effect
A polished button effect with a subtle hover "shine" sweep — perfect for game menus, call-to-action buttons, or any interactive element that needs a little extra life.
- Built with pure CSS pseudo-elements
- Smooth transition on hover
- Works on any button element
- Easy to customize with your own gradient
Usage example:
<ButtonEffect label="Start Game" />
<ButtonEffect label="Settings" />How it's built: Read the ButtonEffect blog post
When to reach for each
| Component | Web / App | Game |
|---|---|---|
| ProgressBar | Loading screens, upload/download, multi-step forms | Health bars, stamina, XP, cooldowns |
| ButtonEffect | Call-to-action buttons, nav highlights | Menu buttons (Start, Settings, Quit) |
More components are on the way. Check back often, or explore the codebase to see how each one is implemented.