Component System

JET is built on a powerful component architecture that makes websites modular, reusable, and easy to customize. This page explains how components work, how to use them effectively, and how to create your own for the marketplace.

What Are Components?

Components are self-contained building blocks of your website—think of them like LEGO bricks. Each component includes:

• HTML structure

• CSS styling

• JavaScript functionality (when needed)

• Responsive behavior

• Customizable properties

Examples: Hero sections, navigation bars, product cards, testimonial carousels, pricing tables, contact forms, footer layouts.

Component Types

JET's library is organized into categories:

Layout

• Headers (navigation, logos, menus)

• Footers (links, social, copyright)

• Sidebars (navigation, widgets)

• Grid Systems (responsive columns)

Content Sections

• Heroes (large header sections with CTAs)

• Features (grid of benefits with icons)

• Testimonials (quotes and reviews)

• Team (staff bios and photos)

• Galleries (image grids and lightboxes)

• FAQs (accordion-style Q&A)

Interactive Elements

• Forms (contact, signup, search)

• Buttons (CTAs, submit, navigation)

• Modals (popups, dialogs)

• Tabs (content switchers)

• Accordions (collapsible content)

Commerce

• Product Cards (image, price, add-to-cart)

  • Shopping Carts (basket and checkout)

  • Pricing Tables (plan comparisons)

  • Payment Forms (integrated checkout)

  Specialized

  • Blog Layouts (post grids, article templates)

  • Authentication (login, signup forms)

  • Dashboards (admin panels, analytics)

  • Calendars (date pickers, event schedulers)

  Component Metadata Schema

  Every component has a structured definition that tells JET how to use it:

  json

  {
    "id": "hero_modern_01",
    "name": "Modern Hero with Video Background",
    "category": "hero",
    "variants": ["default", "centered", "split"],
    "props": {
      "title": "string",
      "subtitle": "string",
      "ctaText": "string",
      "ctaLink": "string",
      "backgroundVideo": "url",
      "overlayOpacity": "number (0-1)"
    },
    "responsive": {
      "mobile": "stack_vertical",
      "tablet": "maintain_layout"
    },
    "dependencies": [],
    "assets": ["hero-video.mp4"]
  }

  This metadata allows the AI to intelligently select and customize components based on your prompts.

  Component Lifecycle

  1. Selection / Creation

  • Browse component library and insert

  • OR describe what you want and JET generates a custom component

  2. Customization

  • Modify properties through chat

  • Use inline inspector for quick edits

  • Advanced users can edit JSON props directly

  3. Save to Project Library

  • Components you customize are saved automatically

  • Reuse across pages in the same project

  4. Publish

  • Components deploy with your website

  • Optimized and minified automatically

  5. Marketplace Listing (Optional)

  • Package your custom component

  • Set a price in $JET

  • List for others to purchase and use

  Customization Methods

  Method 1: Natural Language (Easiest) Simply describe what you want changed:

  • "Make the hero headline bigger"

  • "Change the button color to red"

  • "Add a second CTA button next to the first one"

  Method 2: Inline Inspector (Visual) Click the element in preview:

  • Edit text directly

  • Adjust colors with a color picker

  • Modify spacing with sliders

  • Toggle responsive settings

  Method 3: Props Editor (Advanced) Access the JSON properties panel:

  json

  {
    "title": "Welcome to JET",
    "subtitle": "Build websites by talking",
    "ctaText": "Get Started",
    "theme": "dark"
  }
  ```
  Edit values directly for precise control.
  
  ### **Best Practices for Component Design**
  
  **Accessibility (a11y)**
  - Use semantic HTML (`<nav>`, `<main>`, `<article>`)
  - Include ARIA labels for interactive elements
  - Ensure keyboard navigation works
  - Maintain proper contrast ratios (WCAG AA minimum)
  
  **Performance**
  - Keep component payload small (< 50KB per component)
  - Lazy-load images and heavy assets
  - Minimize JavaScript dependencies
  - Use CSS animations over JS when possible
  
  **Responsiveness**
  - Test on all breakpoints (mobile, tablet, desktop)
  - Use relative units (rem, em, %) over fixed pixels
  - Ensure touch targets are at least 44x44px on mobile
  - Stack complex layouts vertically on small screens
  
  **Reusability**
  - Make components configurable with props
  - Avoid hardcoded values
  - Use consistent naming conventions
  - Document expected props and variants
  
  ### **Component Tree Structure**
  
  Understanding how components nest helps you build complex layouts:
  ```
  Page
  ├── Header (component)
  │   ├── Logo (element)
  │   ├── Navigation (component)
  │   │   ├── Nav Link (element)
  │   │   └── Nav Link (element)
  │   └── CTA Button (element)
  ├── Hero (component)
  │   ├── Heading (element)
  │   ├── Subheading (element)
  │   └── CTA Button (component)
  ├── Features (component)
  │   ├── Feature Card (component)
  │   ├── Feature Card (component)
  │   └── Feature Card (component)
  └── Footer (component)
      ├── Social Links (component)
      └── Copyright (element)

  Each level can be customized independently through chat or inspector.

  Working with Component Props

  Props (properties) are the variables that make components flexible.

  Example: Product Card Props

  json

  {
    "productName": "Ceramic Mug",
    "price": "29.99",
    "currency": "USD",
    "imageUrl": "/images/mug.jpg",
    "rating": 4.5,
    "reviewCount": 127,
    "inStock": true,
    "ctaText": "Add to Cart"
  }
  ```
  
  **Using Props in Chat:**
  > "Create a product card with title='Handmade Ceramic Mug', price='29.99', and image from [upload]"
  
  JET automatically maps your description to the component's prop schema.
  
  ### **Creating Custom Components for Marketplace**
  
  Want to sell your components? Here's the process:
  
  **1. Build & Refine**
  Create a component that solves a specific need. Make it flexible with props and thoroughly test it.
  
  **2. Package**
  JET packages your component including:
  - Code (HTML/CSS/JS)
  - Props schema
  - Preview images
  - Documentation
  
  **3. Set Metadata**
  - Name and description
  - Category and tags
  - Price in $JET
  - License type (single-site vs multi-site)
  
  **4. Submit for Review**
  Community moderation reviews for:
  - Code quality
  - Performance
  - Accessibility
  - No malicious code
  
  **5. List on Marketplace**
  Once approved, your component is available for purchase. You earn $JET on every sale.
  
  ### **Component Examples & Usage**
  
  **Hero Section with Form**
  > "Add a hero with headline 'Start Your Free Trial', subheading describing benefits, and an email capture form with 'Get Started' button"
  
  **Feature Comparison Grid**
  > "Create a 3-column feature grid comparing our plans: Basic, Pro, Enterprise. Show price, included features, and a CTA for each"
  
  **Testimonial Carousel**
  > "Add a testimonial slider with 5 customer quotes, include name, company, and photo for each"
  
  **Product Showcase**
  > "Create a product section with large image on left, title, description, price, and add-to-c