Creating New Components

Creating new components in the PCSTYLE UI library requires adhering to a dual-theme architecture that supports both "Cyber" (aggressive, neon) and "Minimal" (clean, modern) visual styles. Components are built using React and TypeScript, leveraging Framer Motion for animations and Tailwind CSS for styling.

The development workflow emphasizes strict type safety, modular export patterns, and integration with a central UI provider to ensure theme consistency across the library.

Component Architecture and Theming

Every component must react to the global theme state provided by the UIProvider. This is achieved by consuming the useUI hook, which returns the current ThemeMode.

Theme Integration Flow

The following diagram illustrates how a component consumes theme data to determine its visual style:

The useUI hook is the primary interface for components to access the active theme. Sources: [src/provider/index.tsx:43-50](https://github.com/pcstyle-os/ui/blob/HEAD/src/provider/index.tsx#L43-L50), [src/components/buttons/Button.tsx:21-23](https://github.com/pcstyle-os/ui/blob/HEAD/src/components/buttons/Button.tsx#L21-L23)

Theme Switching Logic

The library defines two distinct styles for every UI element. Standard practice involves defining style objects for each theme and selecting the active one at render time.

Sources: [src/theme/colors.ts:7-35](https://github.com/pcstyle-os/ui/blob/HEAD/src/theme/colors.ts#L7-L35), [src/components/feedback/Badge.tsx:18-31](https://github.com/pcstyle-os/ui/blob/HEAD/src/components/feedback/Badge.tsx#L18-L31)

Implementation Standards

TypeScript Interfaces

Components must define comprehensive prop interfaces. When wrapping standard HTML elements, use React.InputHTMLAttributes or Framer Motion's HTMLMotionProps to ensure full attribute support.

interface NewComponentProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary";
  loading?: boolean;
}

Sources: [src/components/forms/Input.tsx:7-10](https://github.com/pcstyle-os/ui/blob/HEAD/src/components/forms/Input.tsx#L7-L10), [src/components/buttons/Button.tsx:8-13](https://github.com/pcstyle-os/ui/blob/HEAD/src/components/buttons/Button.tsx#L8-L13)

Style Application Pattern

Styles are typically split into baseStyles, cyberStyles, and minimalStyles. The final className is a concatenation of these based on the theme state.

Animation with Framer Motion

Interactive components like buttons or tabs should use motion components to handle micro-interactions, such as scaling on tap or layout transitions for active states.

• Button scale: whileTap={{ scale: 0.98 }}
• Tab indicator: layoutId="activeTab"

Sources: [src/components/buttons/Button.tsx:47-48](https://github.com/pcstyle-os/ui/blob/HEAD/src/components/buttons/Button.tsx#L47-L48), [src/components/overlays/Tabs.tsx:32-35](https://github.com/pcstyle-os/ui/blob/HEAD/src/components/overlays/Tabs.tsx#L32-L35)

Registration and Exports

To make a new component available to consumers, it must be registered in the central export file.

1. File Placement: Place the component in the appropriate subdirectory within src/components/ (e.g., feedback/, forms/, layout/).
2. Barrel Export: Add an export statement to src/index.ts.

// src/index.ts
export * from "./components/new-category/NewComponent";

Sources: [src/index.ts:1-15](https://github.com/pcstyle-os/ui/blob/HEAD/src/index.ts#L1-L15)

Quality Standards

The project enforces strict development rules defined in cubic.yaml and tsconfig.json:

• Strict Types: The STRICT_TYPES rule prohibits the use of any types or non-null assertions.
• Target: The compiler targets ES2020 with ESNext modules.
• Dependencies: Components should rely on framer-motion for animation and lucide-react for iconography as peer dependencies.

Sources: [cubic.yaml:26-31](https://github.com/pcstyle-os/ui/blob/HEAD/cubic.yaml#L26-L31), [tsconfig.json:3-15](https://github.com/pcstyle-os/ui/blob/HEAD/tsconfig.json#L3-L15), [package.json:32-37](https://github.com/pcstyle-os/ui/blob/HEAD/package.json#L32-L37)

Summary

Creating new components involves implementing a dual-themed UI logic that leverages React Context via useUI(). By following the established pattern of separating "Cyber" and "Minimal" styles and registering the component in the main entry point, developers ensure the library remains consistent, type-safe, and highly interactive.