> For the complete documentation index, see [llms.txt](https://docs.pixeljourney.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.pixeljourney.xyz/pxlabs-innovation-lab/pxlabs/px-packages/px-ui.md).

# PxUI: Reusable Components & Theming

> **⚠️ DEVELOPMENT STATUS (June 2026)**\
> PxUI is in active development. The core reusable component library, styling system, theming engine, and integration across portals are being built and refined. Theme unlocking mechanics and achievement-based customization are still in early design.\
> **We welcome high-level feedback** on desired theming flexibility and consistency priorities. Join our Discord to share your thoughts.

**PxUI** is the shared design system and component library that powers consistent, high-quality user experiences across all Pixel Journey portals and mini-games. It provides reusable components, styles, layouts, and a powerful theming system that ensures visual and functional coherence while allowing meaningful customization.

## 🎯 Core Purpose

PxUI exists to solve several key challenges:

* Maintain visual and interaction consistency across multiple portals and experiences
* Enable rapid development by reusing battle-tested components
* Support long-term maintainability through centralized styling and component logic
* Allow meaningful personalization through theming, including unlockable themes

This is a foundational part of the Px Packages vision — shared infrastructure that makes the entire ecosystem feel cohesive and professional.

## 🧩 Reusable Components & Layouts

PxUI provides a comprehensive set of reusable building blocks:

* Core UI components (buttons, cards, modals, inputs, navigation, etc.)
* Layout primitives and responsive grid systems
* Data display components (tables, lists, stat cards, progress indicators)
* Feedback and notification systems
* Form and interaction patterns

All portals built on Px Packages leverage these shared components, ensuring a familiar and reliable experience as users move between PxLanding, PxLearn, PxWallet, PxStaking, PxHot, and future experiences.

## 🎨 Theming System

One of the most powerful features of PxUI is its flexible theming engine:

* **Global Theme Switching** — Users can switch between multiple themes across all portals from a central setting.
* **Consistent Application** — Theme changes apply consistently across every portal and mini-game.
* **Customizable Preferences** — Users can personalize their experience according to taste or accessibility needs.

## 🔓 Unlockable & Achievement-Based Themes

Themes are not limited to default options. Many themes can be **unlocked** through progression and ownership:

* Ownership-based unlocks (e.g., holding certain numbers of Pixals or specific NFTs)
* Achievement-based unlocks (completing learning paths, reaching PxHot milestones, crafting achievements, etc.)
* Status and ranking-based unlocks (high staking tiers, leaderboard positions, etc.)
* Seasonal and event-based themes

This creates a powerful connection between user progression and visual identity. Earning achievements or building meaningful holdings in the ecosystem can literally change how the entire Pixel Journey experience looks and feels.

## 🔗 Role Within Px Packages

PxUI is a prime example of the value of shared packages:

* **Consistency** — All portals feel like part of one cohesive ecosystem.
* **Efficiency** — New features and portals can be built faster with reliable components.
* **Maintainability** — Updates and improvements to the design system benefit every experience simultaneously.
* **Personalization** — The theming system adds meaningful customization without fragmenting the experience.
* **Progression Integration** — Unlockable themes tie directly into achievements and ownership systems.

## 🚀 Long-Term Vision

PxUI is expected to evolve into an even more powerful design system that includes:

* Advanced theming capabilities (more granular customization, seasonal themes, community-created themes)
* Deeper integration with achievements and ownership for dynamic visual rewards
* Accessibility-focused themes and settings
* Potential for limited theming control for creators and partners

This shared UI foundation helps Pixel Journey scale while maintaining a high bar for quality and coherence.

## 🤝 Get Involved

We are actively shaping the theming and component strategy. Your feedback on what kinds of themes and customization options would feel rewarding is very welcome.

**Join our Discord** to share ideas about theming priorities, unlock mechanics, and how PxUI should evolve.

*High-level strategic overview. Specific implementation details are still being defined. DYOR.*