Introduction
Relevant source files
The following files were used as context for generating this wiki page:
The @pcstyle/ui project is a React-based design system and component library specifically engineered to support dual-theme environments, focusing on "Cyberpunk" and "Minimal" aesthetics. It provides a set of highly stylized UI components, layout containers, and visual effects that adapt dynamically based on the active theme mode. The library is built with TypeScript, ensuring strict type safety and a modern development experience using ESM standards.
Sources: package.json:1-10, src/theme/colors.ts:5-40
Core Architecture
The architecture of the library revolves around a central provider that manages state and propagates theme data to all child components. This is achieved through a React Context-based provider system that handles theme switching and CSS variable synchronization.
Theme Provider and Context
The UIProvider is the root component of the library. It manages the ThemeMode state, which can be either cyber or minimal. It performs two primary functions:
- State Management: It provides
theme,setTheme, andtoggleThemevia theUIContext. - Style Injection: It maps theme-specific colors to CSS variables on the document root and sets a
data-pc-themeattribute for global styling hooks.
Sources: src/provider/index.tsx:7-40
The following diagram illustrates the flow of theme data from the provider to individual components:
Sources: src/provider/index.tsx:25-35
Design Tokens and Theming
The system uses a structured set of design tokens to maintain visual consistency across components. These tokens define typography, spacing, radii, and transitions, while the color system defines the specific palettes for the dual-theme support.
Theme Modes
| Feature | Cyber Theme | Minimal Theme |
|---|---|---|
| Primary Color | #ff00ff (Neon Pink) | #0a0a0a (Black) |
| Background | #000000 | #ffffff |
| Border Styling | 20% Alpha Neon | #e5e5e5 Solid |
| Visual Style | Aggressive, Glowing | Clean, Modern |
Sources: src/theme/colors.ts:7-40
Component Token Usage
Components consume these tokens through the useUI hook to determine which style sets to apply. For instance, the Button component switches between cyberStyles and minimalStyles based on the context.
Sources: src/components/buttons/Button.tsx:32-52
Visual Effects System
A distinguishing feature of the PCSTYLE UI is its dedicated effects layer, which includes specialized components for enhancing the "cyber" aesthetic. These effects are conditionally rendered based on the active theme.
Included Effects
- CRT Overlay: Provides scanlines and vignette effects to simulate a cathode-ray tube monitor. It is only active in
cybermode. - Neural Cursor: A custom mouse follower effect that adds a trail and connecting lines between the actual mouse position and a delayed position.
Sources: src/effects/crt-overlay.tsx:9-15, src/effects/neural-cursor.tsx:28-35
Component Library Overview
The library exports a variety of components via its main entry point, categorized into buttons, layout, forms, feedback, and overlays.
| Category | Components | Files |
|---|---|---|
| Buttons | Button | src/components/buttons/Button.tsx |
| Layout | Card | src/components/layout/Card.tsx |
| Forms | Input | src/components/forms/Input.tsx |
| Feedback | Badge | src/components/feedback/Badge.tsx |
| Overlays | Tabs | src/components/overlays/Tabs.tsx |
Sources: src/index.ts:4-12
Implementation Example: Button
The Button component demonstrates the integration of framer-motion for animations and the conditional styling logic used throughout the library.
export function Button({ variant = "primary", ...props }: ButtonProps) {
const { theme } = useUI();
const isCyber = theme === "cyber";
// ... style logic ...
return (
<motion.button whileTap={{ scale: 0.98 }} ...>
{children}
</motion.button>
);
}
Sources: src/components/buttons/Button.tsx:24-60
Summary
The @pcstyle/ui library serves as a specialized design system that bridges the gap between high-fidelity "cyberpunk" visuals and clean "minimalist" interfaces. By leveraging a central UIProvider and a robust token system defined in src/theme/tokens.ts, it allows developers to build immersive interfaces with strict type safety and dynamic theme switching capabilities.
Sources: package.json:5, src/provider/index.tsx:1-5