component-template-generator

Component Template Generator

Create production-ready component code that properly uses your design tokens. Generates React, Vue, or Svelte components with variants, accessibility, and token integration.

Quick Start

Minimal example - generate a Button component:

// Input: Trend ID + Component type
// Output: Complete component with token usage

// Button.tsx (neobrutalism)
import { cn } from '@/lib/utils';

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
}

export function Button({ variant = 'primary', size = 'md', children }: ButtonProps) {
  return (
    <button className={cn(
      'border-3 border-brutal-black font-display transition-all duration-100',
      'shadow-brutal hover:shadow-brutal-hover hover:-translate-x-0.5 hover:-translate-y-0.5',
      'active:shadow-brutal-active active:translate-x-0.5 active:translate-y-0.5',
      // Variants
      variant === 'primary' && 'bg-brutal-red text-white',
      variant === 'secondary' && 'bg-brutal-cream text-brutal-black',
      variant === 'ghost' && 'bg-transparent border-transparent shadow-none',
      // Sizes
      size === 'sm' && 'px-3 py-1.5 text-sm',
      size === 'md' && 'px-4 py-2 text-base',
      size === 'lg' && 'px-6 py-3 text-lg',
    )}>
      {children}
    </button>
  );
}

Key principle: Components use semantic token names, not hardcoded values.

Core Mission

Generate component templates that:

1. Use design tokens correctly (semantic names, not hex values)
2. Include common variants (size, color, state)
3. Have accessibility built in (ARIA, keyboard, focus)
4. Are framework-idiomatic (React hooks, Vue composition, Svelte stores)

When to Use

✅ Use when:

• Starting a component library with generated tokens
• Need consistent token usage across components
• Want accessibility baked into templates
• Bootstrapping a design system implementation

❌ Do NOT use when:

• Need tokens only (use design-system-generator)
• Need complete UI library (use shadcn/ui or similar)
• Customizing existing components (just edit them)