Skip to content

Forms & UI Elements (Tier 2)

Purpose: Form components and UI building blocks
Tier: 2 (Standard Documentation)
Count: 7 components

Form Components

1. ContactForm

Purpose: Primary contact form (homepage)
Fields: Name, Email, Phone, Message

Features:

  • Validation
  • Submit to API
  • Success/error states
  • reCAPTCHA (possible)

2. ContactForm2

Purpose: Alternative contact form
Difference: Different styling or fields

3. Login

Purpose: Login form component
Used In: Auth pages

Features:

  • Email/password inputs
  • Remember me checkbox
  • Forgot password link
  • Form validation
  • Error display

UI Elements

4. FeatureCard

Purpose: Feature showcase card
Used In: Homepage, features pages

Props:

interface FeatureCardProps {
  icon: ReactNode;
  title: string;
  description: string;
}

Features:

  • Icon/image
  • Title
  • Description
  • Hover effects

5. KeyFeaturesCard

Purpose: Key feature highlight
Similar: FeatureCard but different styling

6. MachineCard

Purpose: AI agent/machine display card
Used In: Agent showcase

Features:

  • Image/video
  • Title
  • Description
  • CTA button

7. Loader

Purpose: Loading spinner/indicator
Types: Multiple variants (full-page, inline)

Usage:

<Loader size="lg" color="orange" />

Variants:

  • Full-screen overlay
  • Inline spinner
  • Button loading state

Colors: Orange (primary), Blue, Purple

Common UI Patterns

Cards:

  • Rounded corners (rounded-lg, rounded-xl)
  • Shadow (shadow-sm to shadow-2xl)
  • Hover effects (hover:shadow-lg, hover:scale-105)
  • Border (border-gray-100)
  • White background

Buttons:

  • Primary: gradient (orange to purple)
  • Secondary: outline
  • Disabled states
  • Loading states
  • Icon + text

Inputs:

  • Label + input pairing
  • Error state styling
  • Focus rings
  • Placeholder text
  • Helper text

"Building blocks for beautiful interfaces."