⚛️ PixelartUI React

PixelartUI React is the first official implementation of the PixelartUI design system, built specifically to feel natural inside modern React applications.
While the PixelartUI overview defines the global design language and vision, this section focuses on how that system comes to life in the React ecosystem.

🎯 Purpose of the React Package

The React package provides a set of pixel-art styled UI components designed around the expectations of React developers:

• Familiar event patterns (onClick, onChange, etc.)
• Predictable controlled/uncontrolled behavior
• Strong TypeScript typing for every component
• Composition-first APIs that integrate cleanly with React’s rendering model

It serves as the reference implementation that other framework versions will follow, ensuring consistent design, behavior, and naming across the entire PixelartUI ecosystem.

🧱 Design & Architecture Philosophy

1. React-Native API Feel

Components use idiomatic React patterns, including:

• Props-driven configuration
• One-way data flow
• Functional composition via children
• Type-safe event handling

The goal is for components to “feel like React” rather than feel like wrappers.

2. Strict, Descriptive Typing

Every component ships with:

• Strong TypeScript definitions
• Styled enums (ButtonType, ModalStyle, etc.)
• Clear prop interfaces
• Editor autocomplete support

This helps ensure consistency across apps and reduces UI-related bugs.

3. PixelartUI Visual Rules, React Implementation

All styling and visual rules come from the global PixelartUI system — pixel grid alignment, retro borders, color constraints — but the React package adapts them into:

• Component-level style variants
• Optional overrides (backgroundColor, sizes, custom styles)
• ClassName hooks for extendibility

This guarantees the same visual identity across all frameworks, with React acting as the “model” implementation.

4. Separation of Component Logic & Layout

React components avoid imposing layout structures so developers remain free to use:

• Flexbox
• Grid
• Utility classes
• Custom wrappers

PixelartUI provides visuals and behavior — you control the layout.

🔍 What You’ll Find in This Section of the Docs

The React documentation focuses exclusively on React-specific topics, including:

• Props, types, and component API references
• Structure and composition patterns
• Notes on React-specific behaviors (controlled inputs, event types, etc.)
• Styling extension options for React apps
• Guidelines for integrating the library into React-based projects

You will not find usage examples here — those are centralized in the shared Components section for all frameworks.

🌟 React as the Foundation

Although PixelartUI is framework-agnostic, the React version is the flagship:

• It receives new components first
• It sets many of the naming conventions
• It shapes the API standards other frameworks follow
• It acts as the testing ground for new design patterns

By starting with React, you gain access to the most complete and up-to-date implementation of the PixelartUI system.

PixelartUI React brings together the charm of pixel art and the power of React to help you build playful, expressive, and highly functional interfaces — without reinventing the retro aesthetic from scratch.