component-wrapper-architecture

Component Wrapper Architecture

8-bit components wrap shadcn/ui components rather than replacing them. This pattern maintains compatibility while adding retro styling.

Basic Wrapper Pattern

Structure:

1. Import base component with alias
2. Define variants using class-variance-authority
3. Export separate interface for props
4. Use ref prop (not forwardRef for React 19)

import { type VariantProps, cva } from "class-variance-authority";
import { cn } from "@/lib/utils";
import { Button as ShadcnButton } from "@/components/ui/button";
import "@/components/ui/8bit/styles/retro.css";