Component Variants

Agent Workflow (MANDATORY)

Before implementation, use TeamCreate to spawn 3 agents:

• fuse-ai-pilot:explore-codebase - Check existing variant patterns

• fuse-ai-pilot:research-expert - cva/class-variance-authority docs

After: Run fuse-ai-pilot:sniper for validation.

Overview

Style Characteristics Use Case

Glass Blur + transparency + glow Premium, modern, hero

Outline Border only, no fill Secondary actions

Flat Solid color, no effects Dense UI, fallback

Quick Reference

CVA Card Variants

import { cva, type VariantProps } from "class-variance-authority";

const cardVariants = cva( "rounded-2xl p-6 transition-all duration-200", { variants: { variant: { glass: [ "bg-white/80 backdrop-blur-xl", "border border-white/20", "shadow-xl shadow-black/5", ], outline: [ "bg-transparent", "border-2 border-primary/30", "hover:border-primary/50", ], flat: [ "bg-surface", "border border-border", ], }, }, defaultVariants: { variant: "glass", }, } );

Button Variants

const buttonVariants = cva( "inline-flex items-center justify-center font-medium transition-all", { variants: { variant: { glass: "bg-white/20 backdrop-blur-md border border-white/30", outline: "bg-transparent border-2 border-primary text-primary", flat: "bg-primary text-primary-foreground", }, }, } );

Dark Mode Per Variant

const glassVariant = { light: "bg-white/80 backdrop-blur-xl border-white/20", dark: "bg-black/40 backdrop-blur-xl border-white/10", };

// Tailwind className="bg-white/80 dark:bg-black/40 backdrop-blur-xl"

Validation Checklist

[ ] All 3 variants defined (glass, outline, flat) [ ] CVA or similar variant system used [ ] Dark mode handled per variant [ ] Default variant specified [ ] Hover states per variant

Best Practices

DO

• Use CVA for type-safe variants

• Define all three styles consistently

• Handle dark mode per variant

• Add hover/focus states

DON'T

• Mix variant systems

• Forget default variant

• Skip dark mode

• Ignore hover states