Quick Start Guide
Relevant source files
The following files were used as context for generating this wiki page:
The @pcstyle/ui library is a React-based design system and component library featuring dual-theme support, specifically designed for "cyberpunk" and "minimal" aesthetics. It provides a set of highly stylized, type-safe components and visual effects built on top of Framer Motion and React 18+.
This guide covers the fundamental setup, theme configuration, and component usage required to integrate the PCSTYLE design system into a React application. It details the initialization of the UI provider, theme switching mechanics, and the application of specialized visual effects like the CRT overlay and neural cursor.
Sources: package.json:1-10, src/index.ts:1-15
Installation and Requirements
To use @pcstyle/ui, your project must meet the minimum peer dependency requirements, including React 18 or higher. The library is distributed as an ESM module with full TypeScript definitions.
| Dependency | Required Version | Purpose |
|---|---|---|
react | >=18 | Core UI library |
react-dom | >=18 | DOM rendering |
framer-motion | >=10 | Animations and gestures |
lucide-react | >=0.200 | Icon set |
Sources: package.json:23-38
Core Provider Setup
The UIProvider is the central architecture for managing state and themes within the application. It must wrap the root of your component tree to provide the necessary context for components and effects.
UIProvider Implementation
The provider manages the current ThemeMode ("cyber" or "minimal") and synchronizes theme colors with CSS variables on the document root.
The provider also applies a global class name pcstyle-theme-[theme] to allow for global CSS targeting based on the active theme.
Sources: src/provider/index.tsx:13-52, src/theme/colors.ts:35
Consuming Theme Context
Components access the theme state via the useUI hook. This hook returns the current theme string and functions to update it.
const { theme, setTheme, toggleTheme } = useUI();
Sources: src/provider/index.tsx:54-60
Visual Effects and Theming
The library includes specialized "cyber" effects that are conditionally rendered based on the active theme.
Theme Modes
The system supports two distinct visual styles:
- Cyber: Aggressive neon palette (Pink #ff00ff, Cyan #00ffff) with high-glow effects and dark backgrounds.
- Minimal: Clean, modern white-label style using zinc grays and black.
Sources: src/theme/colors.ts:5-33
Specialized Effects
Two primary effects are available for the "cyber" theme:
- CRTOverlay: Adds scanlines and a vignette to simulate a retro monitor.
- NeuralCursor: Replaces the system cursor with a custom, trailing-line cursor (only active in
cybermode and on desktop screens).
Component Usage
All components are responsive to the theme provided by the UIProvider.
Buttons
Buttons support multiple variants (primary, secondary, outline, ghost) and sizes (sm, md, lg). They leverage framer-motion for tap interactions.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | primary | secondary | outline | ghost | primary | Visual style |
size | sm | md | lg | md | Padding and font size |
loading | boolean | false | Shows a spinning indicator |
Sources: src/components/buttons/Button.tsx:7-31
Theme Synchronization
Components dynamically calculate styles based on the theme. For example, the Button component switches between neon pink shadows in cyber mode and flat black backgrounds in minimal mode.
const isCyber = theme === "cyber";
const currentStyles = isCyber ? cyberStyles[variant] : minimalStyles[variant];
Sources: src/components/buttons/Button.tsx:33-58
Summary
The @pcstyle/ui library provides a robust, themed component architecture. By wrapping the application in the UIProvider, developers gain access to a dual-style design system that handles everything from basic buttons and inputs to advanced visual effects like CRT scanlines and custom cursors, all while maintaining strict type safety and high performance through ESM standards.
Sources: src/index.ts:1-15, cubic.yaml:18-24