Skip to content
PixeloreUI
v0.2.1 — Press Start

BuildBrowser GamesFaster

The 8-bit React design system for HTML games. Drop-in HUDs, menus, dialog screens, and player feedback — fully accessible, motion-aware, and pixel-perfect.

pnpm add @pixelore/react motion
Built for

React-powered browser games

HTML Games

Turn-based RPGs, roguelikes, idle games

HUDs, inventories, ability menus, dialog screens, encounter UIs — without rebuilding the basics every time.

Creative Tools

Pixel art tools, level editors, jam tooling

Same retro vibe consumers expect from a creative tool, with grown-up accessibility built in.

Personality

Portfolios, side projects, anything with vibes

When ‘flat shadcn dashboard’ is wrong but you don't want to hand-roll a theme.

Showcase

Pick a component. Press a button.

Everything below is rendered with the live library. Hover, focus, click — then check the source in the docs.

Button

Heart Bar

Badge

Quest+200 XPLow HPBossNPC

Form Controls

Progress

Loading World
XP to Level

Card + Avatar

ES

Eduardo

Lvl 99 · Frontend

Joined the party.
Live Demo

Pixelore Quest

A complete turn-based RPG, built entirely with the design system.

Map navigation, random encounters, animated battle screen, party stats, inventory, NPC merchants, save/load — orchestrating Dialog, Card, Badge, Button, HeartBar, Progress, Tabs, Tooltip, and Motion in one stateful app. Play it at pixelore-rpg.vercel.app or clone apps/rpg-demo from the repo as a starting point for your own browser game.

+200 XPBoss← every element here is a real component you can import.

Four rules of the engine

Game-ready, not generic

HeartBar, HP/MP progress, badge tags, modal dialogs, focus-trapped overlays — the patterns a game UI actually needs, not yet another empty Card.

Accessible by default

Radix primitives under everything. Keyboard support, ARIA, focus management, screen-reader-tested. WCAG 2.2 AA targets — your jam game can pass a11y audits.

Motion that respects you

Powered by Motion. Translates and scales swap to opacity under prefers-reduced-motion. Players prone to motion sickness still get feedback.

Pixel-perfect, framework-friendly

Box-shadow borders so anti-aliasing can't blur them. Press Start 2P + VT323 typography. Works in Next.js App Router, Vite, Remix, Astro islands — anywhere React runs.