Installation & Setup
Relevant source files
The following files were used as context for generating this wiki page:
This page provides a comprehensive guide on installing and setting up the @pcstyle/ui design system. This library is a React-based component toolkit featuring a dual-theme architecture (Cyber and Minimal) designed for modern web applications.
The setup process involves installing the necessary peer dependencies, configuring the TypeScript environment, and wrapping the application with a central provider to manage theme states and design tokens.
Prerequisites & Dependencies
Before integrating the library, ensure your project environment meets the following requirements. The library is built as an ESM (ES Module) package and targets modern browser environments.
Peer Dependencies
The following packages must be installed in the consuming project to ensure the UI components function correctly:
| Package | Version | Description |
|---|---|---|
react | >=18 | Core UI library |
react-dom | >=18 | DOM rendering for React |
framer-motion | >=10 | Animation engine for transitions and effects |
lucide-react | >=0.200 | Icon set used across components |
Sources: package.json:30-35
Development Environment
The library is authored in TypeScript and requires specific compiler settings for optimal compatibility:
- Target:
ES2020 - Module Resolution:
bundler - JSX:
react-jsx
Sources: tsconfig.json:3-14
Implementation Flow
Setting up the library follows a structured flow from package installation to theme injection.
The diagram above illustrates the typical integration lifecycle for a new project.
Sources: src/provider/index.tsx:1-45, package.json:30-35
Provider Configuration
The UIProvider is the core component required for the design system to function. It manages the current theme state and synchronizes design tokens with CSS variables on the document root.
The UIProvider Component
The provider should wrap the entire application or the specific branch where the components are used.
| Property | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | Required | The application components |
initialTheme | "cyber" | "minimal" | "cyber" | Sets the starting theme |
Sources: src/provider/index.tsx:15-22
Theme Synchronization
Upon initialization or theme change, the provider automatically maps colors from the selected theme to CSS variables.
The sequence shows how the provider updates the global document state to reflect the active theme.
Sources: src/provider/index.tsx:29-40
Project Integration
To use components, they must be imported from the main entry point or specific sub-paths defined in the package exports.
Entry Points
The library provides several export paths for targeted imports:
.: Main entry point for all components and providers../theme: Access to design tokens and color constants../effects: Specialized visual components likeCRTOverlayorNeuralCursor.
Sources: package.json:9-21, src/index.ts:1-15
Global Styles and Tokens
The system utilizes a set of predefined tokens for typography, spacing, and radii. These are accessible via the theme modules.
export const tokens = {
typography: {
fontFamily: {
mono: '"JetBrains Mono", "Fira Code", monospace',
sans: 'Inter, system-ui, sans-serif',
},
fontWeight: {
bold: "700",
black: "900",
}
}
};
Sources: src/theme/tokens.ts:6-33
Summary
Successful installation of @pcstyle/ui requires satisfying React 18+ and Framer Motion peer dependencies. Once installed, the UIProvider serves as the architectural backbone, enabling the dual-theme system by injecting CSS variables and providing a context hook (useUI) for child components to react to theme changes.