Auto Generated Shadcn Ui Patterns

First arg: Base classes applied to all variants Second arg: Object with variants and defaultVariants

Always export variants function for reuse: export { Button, buttonVariants };

Type-Safe Props with VariantProps

Extract variant types from CVA definition:

// From frontend/components/ui/button.tsx
export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}

VariantProps<typeof buttonVariants> gives you typed variant and size props.

Simple components without custom props:

// From frontend/components/ui/badge.tsx
export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

Radix Slot Pattern (asChild)

Use Slot from Radix to allow component polymorphism:

// From frontend/components/ui/button.tsx
import { Slot } from "@radix-ui/react-slot";

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button";
    return (
      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
    );
  }
);

Pattern: const Comp = asChild ? Slot : "button"

Allows usage like:

<Button asChild>
  <Link href="/dashboard">Go to Dashboard</Link>
</Button>

cn Utility for className Merging

Always use cn() to merge variant classes with custom classes:

// From frontend/lib/utils.ts
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Usage in components:

// Merge variant classes with additional className
<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />

// Or simpler for non-CVA components
<div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />

// Or for subcomponents with static classes
<h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />

Key: Always pass className last to allow user overrides.

forwardRef Pattern

All interactive components use forwardRef for ref forwarding:

// With custom interface
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    // ...
  }
);
Button.displayName = "Button";

// Inline type for subcomponents
const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
  )
);
AlertTitle.displayName = "AlertTitle";

Always set displayName for better debugging.

Variant Patterns in This Project

Standard Variants