Custom Styling Examples

Custom Button Variant

// Add to button.tsx
const buttonVariants = cva(
  "base-classes",
  {
    variants: {
      variant: {
        // ... existing variants
        gradient: "bg-gradient-to-r from-primary to-primary/80 text-white",
      },
    },
  }
);

Custom Input Style

// Extend input.tsx
const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, variant, ...props }, ref) => {
    return (
      <input
        ref={ref}
        className={cn(
          "base-input-classes",
          variant === "filled" && "bg-muted border-0",
          variant === "outlined" && "border-2",
          className
        )}
        {...props}
      />
    );
  }
);

Custom Card Variant

// Add to card.tsx
const cardVariants = cva(
  "rounded-lg border bg-card text-card-foreground shadow-sm",
  {
    variants: {
      variant: {
        default: "",
        elevated: "shadow-lg",
        outlined: "border-2 shadow-none",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);