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)

Component Catalog

Core Components

Layout Components

Interactive Components

Template Structure

Each component template includes:

// 1. Type definitions
interface ComponentProps {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
  // ... other props
}

// 2. Component implementation
export function Component({ variant, size, ...props }: ComponentProps) {
  // Token-based styling
  // Accessibility attributes
  // Event handlers
}

// 3. Subcomponents (if applicable)
Component.Header = function Header() { /* ... */ };
Component.Body = function Body() { /* ... */ };

// 4. Default export
export default Component;

Framework Templates

React + Tailwind

// Uses: className, cn() utility, React.forwardRef for refs
import { forwardRef } from 'react';
import { cn } from '@/lib/utils';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary';
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = 'primary', className, ...props }, ref) => (
    <button
      ref={ref}
      className={cn(
        'border-3 border-brutal-black shadow-brutal',
        variant === 'primary' && 'bg-brutal-red',
        className
      )}
      {...props}
    />
  )
);

React + CSS Variables

// Uses: style prop with CSS variables, CSS modules
import styles from './Button.module.css';

export function Button({ variant = 'primary', ...props }) {
  return (
    <button
      className={`${styles.button} ${styles[variant]}`}
      style={{
        '--button-shadow': 'var(--shadow-md)',
        '--button-border': 'var(--border-width) solid var(--color-border)',
      }}
      {...props}
    />
  );
}

Vue 3 + Composition API

<script setup lang="ts">
interface Props {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  size: 'md',
});

const classes = computed(() => [
  'border-3 border-brutal-black shadow-brutal',
  props.variant === 'primary' && 'bg-brutal-red',
  props.variant === 'secondary' && 'bg-brutal-cream',
]);
</script>

<template>
  <button :class="classes">
    <slot />
  </button>
</template>

Svelte

<script lang="ts">
  export let variant: 'primary' | 'secondary' = 'primary';
  export let size: 'sm' | 'md' | 'lg' = 'md';
</script>

<button
  class="border-3 border-brutal-black shadow-brutal"
  class:bg-brutal-red={variant === 'primary'}
  class:bg-brutal-cream={variant === 'secondary'}
  on:click
>
  <slot />
</button>

Accessibility Patterns

Focus Management

// All interactive components include visible focus
'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2'
'focus-visible:ring-brutal-blue'

Keyboard Navigation

// Dropdown with keyboard support
function handleKeyDown(e: KeyboardEvent) {
  switch (e.key) {
    case 'ArrowDown': focusNext(); break;
    case 'ArrowUp': focusPrev(); break;
    case 'Escape': close(); break;
    case 'Enter': select(); break;
  }
}

ARIA Attributes

// Dialog with proper ARIA
<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-description"
>

Trend-Specific Patterns

Neobrutalism Components

// Hard shadows, bold borders, transform on interaction
'border-3 border-black 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'

Glassmorphism Components

// Frosted glass, subtle borders, backdrop blur
'bg-glass-white/10 backdrop-blur-glass'
'border border-glass-white/20'
'shadow-glass'

Terminal Components

// Monospace, green-on-black, CRT effects
'font-mono bg-term-bg text-term-green'
'border border-term-green/30'
'shadow-term-glow'

Generation Workflow

1. design-system-generator → tokens (Tailwind/CSS)
2. component-template-generator → component code
3. Customize variants and props as needed
4. design-system-documenter → component docs

See Also

References

• references/component-patterns.md - Full patterns for neobrutalism, glassmorphism, terminal, web3, swiss
• references/component-catalog.md - NEW: 21st.dev component counts (1400+ components)
• Marketing blocks: 73 heroes, 34 CTAs, 11 nav menus, 36 features
• UI components: 130 buttons, 102 inputs, 79 cards, 40 accordions
• Design system references: Elastic UI, HeroUI, Ariakit, shadcn

Related Skills

• design-system-generator - Generate tokens first (24 trends, 31 styles)
• design-system-documenter - Document generated components

Component Catalog Reference

Component counts from 21st.dev community library (1400+ total components).

Marketing Blocks

Use these counts to understand available pattern variety:

Text & Typography Components

UI Components

Core interactive components for application UIs:

Featured Components

High-quality implementations from known sources:

Component Selection by Trend

Neobrutalism Components

Best fits: Buttons (bold shadows), Cards (thick borders), Inputs (stark contrast) Avoid: Glassmorphism effects, soft shadows, gradients

Glassmorphism Components

Best fits: Cards (backdrop-blur), Modals (frosted glass), Navigation (translucent) Avoid: Hard shadows, thick borders

Terminal Aesthetic

Best fits: Inputs (monospace), Cards (bordered), Buttons (text-only) Avoid: Gradients, rounded corners, images

Web3/Crypto

Best fits: Buttons (gradient glow), Cards (dark + neon), Pricing (tier comparison) Avoid: Light themes, muted colors

Swiss Minimalist

Best fits: Cards (grid-based), Typography (scale-driven), Layout (whitespace) Avoid: Decoration, shadows, heavy borders

Mapping to Design System Generator

When generating a design system, use component counts to prioritize:

1. High-count = common need: Buttons (130), Inputs (102), Cards (79) should have robust token coverage 2. Low-count = specialized: File Trees (2), Empty States (1) can use base tokens 3. Marketing vs UI: Heroes (73) need different tokens than Checkboxes (19)

Token Priority Matrix

Related Design Systems

Referenced design systems from Component Gallery (95 total, 2680 examples):

Use these as reference implementations when generating components for similar use cases.

Component Patterns by Trend

Neobrutalism Patterns

Button

export function Button({ variant = 'primary', size = 'md', children, ...props }) {
  return (
    <button
      className={cn(
        // Base
        'font-display font-bold uppercase tracking-wide',
        'border-3 border-brutal-black',
        'transition-all duration-100',

        // Shadow & transform
        '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',

        // Focus
        'focus:outline-none focus-visible:ring-2 focus-visible:ring-brutal-blue focus-visible:ring-offset-2',

        // Variants
        variant === 'primary' && 'bg-brutal-red text-white',
        variant === 'secondary' && 'bg-brutal-yellow text-brutal-black',
        variant === 'ghost' && 'bg-transparent shadow-none hover:bg-brutal-cream',

        // 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',

        // Disabled
        'disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-brutal',
      )}
      {...props}
    >
      {children}
    </button>
  );
}

Card

export function Card({ variant = 'default', children, ...props }) {
  return (
    <article
      className={cn(
        'bg-brutal-cream',
        'border-3 border-brutal-black',
        'shadow-brutal',

        variant === 'interactive' && [
          'cursor-pointer',
          'hover:shadow-brutal-hover hover:-translate-x-0.5 hover:-translate-y-0.5',
          'transition-all duration-100',
        ],

        variant === 'highlighted' && 'bg-brutal-yellow',
      )}
      {...props}
    >
      {children}
    </article>
  );
}

Card.Header = function CardHeader({ children }) {
  return (
    <header className="px-4 py-3 border-b-3 border-brutal-black bg-brutal-blue text-white">
      {children}
    </header>
  );
};

Card.Body = function CardBody({ children }) {
  return <div className="p-4">{children}</div>;
};

Input

export function Input({ label, error, ...props }) {
  const id = useId();

  return (
    <div className="space-y-1">
      {label && (
        <label htmlFor={id} className="block font-display font-bold text-sm">
          {label}
        </label>
      )}
      <input
        id={id}
        className={cn(
          'w-full px-3 py-2',
          'bg-white',
          'border-3 border-brutal-black',
          'font-body',
          'shadow-brutal-sm',
          'focus:outline-none focus:shadow-brutal focus:-translate-x-0.5 focus:-translate-y-0.5',
          'transition-all duration-100',

          error && 'border-brutal-red',
        )}
        aria-invalid={error ? 'true' : undefined}
        aria-describedby={error ? `${id}-error` : undefined}
        {...props}
      />
      {error && (
        <p id={`${id}-error`} className="text-sm text-brutal-red font-bold">
          {error}
        </p>
      )}
    </div>
  );
}

Glassmorphism Patterns

Card

export function GlassCard({ children, blur = 'md', ...props }) {
  return (
    <div
      className={cn(
        'bg-glass-white',
        'border border-glass-white-border',
        'rounded-xl',
        'shadow-glass',

        blur === 'sm' && 'backdrop-blur-glass-sm',
        blur === 'md' && 'backdrop-blur-glass',
        blur === 'lg' && 'backdrop-blur-glass-lg',
      )}
      {...props}
    >
      {children}
    </div>
  );
}

Button

export function GlassButton({ variant = 'default', children, ...props }) {
  return (
    <button
      className={cn(
        'px-4 py-2',
        'bg-glass-white backdrop-blur-glass',
        'border border-glass-white-border',
        'rounded-lg',
        'text-white',
        'transition-all duration-200',

        'hover:bg-white/20',
        'active:bg-white/5',

        'focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50',

        variant === 'accent' && 'bg-gradient-to-r from-purple-500/20 to-pink-500/20',
      )}
      {...props}
    >
      {children}
    </button>
  );
}

Terminal Patterns

Output

export function TerminalOutput({ children, variant = 'classic' }) {
  return (
    <pre
      className={cn(
        'font-mono text-sm',
        'p-4',
        'overflow-auto',

        variant === 'classic' && 'bg-term-bg text-term-green',
        variant === 'amber' && 'bg-term-amber-bg text-term-amber',
        variant === 'matrix' && 'bg-term-matrix-bg text-term-matrix',
      )}
    >
      <code>{children}</code>
    </pre>
  );
}

Prompt

export function TerminalPrompt({ prefix = '$', children }) {
  return (
    <div className="font-mono flex items-center gap-2">
      <span className="text-term-bright select-none">{prefix}</span>
      <span className="text-term-green">{children}</span>
      <span className="animate-blink text-term-green">█</span>
    </div>
  );
}

Web3 Patterns

Card

export function Web3Card({ glow = false, children, ...props }) {
  return (
    <div
      className={cn(
        'bg-web3-bg',
        'border border-web3-indigo/30',
        'rounded-2xl',
        'p-6',

        glow && 'shadow-web3-glow',

        'hover:border-web3-indigo/50',
        'transition-all duration-300',
      )}
      {...props}
    >
      {children}
    </div>
  );
}

Button

export function Web3Button({ variant = 'primary', children, ...props }) {
  return (
    <button
      className={cn(
        'px-6 py-3',
        'rounded-xl',
        'font-display font-semibold',
        'transition-all duration-300',

        variant === 'primary' && [
          'bg-gradient-to-r from-web3-indigo to-web3-purple',
          'text-white',
          'shadow-web3-glow',
          'hover:shadow-web3-glow-lg hover:scale-105',
        ],

        variant === 'outline' && [
          'bg-transparent',
          'border border-web3-indigo',
          'text-web3-indigo',
          'hover:bg-web3-indigo/10',
        ],

        'focus:outline-none focus-visible:ring-2 focus-visible:ring-web3-purple',
      )}
      {...props}
    >
      {children}
    </button>
  );
}

Swiss/Minimal Patterns

Button

export function SwissButton({ variant = 'primary', children, ...props }) {
  return (
    <button
      className={cn(
        'px-4 py-2',
        'font-body',
        'transition-colors duration-150',

        variant === 'primary' && [
          'bg-swiss-black text-swiss-white',
          'hover:bg-swiss-gray-800',
        ],

        variant === 'secondary' && [
          'bg-swiss-gray-100 text-swiss-black',
          'hover:bg-swiss-gray-200',
        ],

        variant === 'outline' && [
          'bg-transparent',
          'border border-swiss-black',
          'hover:bg-swiss-gray-100',
        ],

        'focus:outline-none focus-visible:ring-2 focus-visible:ring-swiss-black focus-visible:ring-offset-2',
      )}
      {...props}
    >
      {children}
    </button>
  );
}

Grid

export function SwissGrid({ cols = 12, gap = 'swiss', children }) {
  return (
    <div
      className={cn(
        'grid',
        `grid-cols-${cols}`,
        `gap-${gap}`,
      )}
    >
      {children}
    </div>
  );
}

Accessibility Utilities

Focus Ring

// Consistent focus ring across all components
const focusRing = 'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2';

// Trend-specific focus colors
const focusColors = {
  neobrutalism: 'focus-visible:ring-brutal-blue',
  glassmorphism: 'focus-visible:ring-white/50',
  terminal: 'focus-visible:ring-term-green',
  web3: 'focus-visible:ring-web3-purple',
  swiss: 'focus-visible:ring-swiss-black',
};

Skip Link

export function SkipLink({ href = '#main' }) {
  return (
    <a
      href={href}
      className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-white focus:text-black"
    >
      Skip to main content
    </a>
  );
}