component-wrapper-architecture

name	component-wrapper-architecture
description	Best practices for wrapping shadcn/ui components. Apply when creating 8-bit styled variants of existing shadcn/ui components.

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";

export const buttonVariants = cva("", {
  variants: {
    font: {
      normal: "",
      retro: "retro",
    },
    : {
      : ,
      
    },
  },
  : {
    : ,
    : ,
  },
});

  
   .<>,
    <typeof buttonVariants> {
  ?: ;
  ?: .<>;
}

 () {
   { variant, size, className, font } = props;

   (
    
  );
}