Skip to content
Loom Documentation
Open the app

Component Library

The model does not invent markup. It picks section slugs from this library and supplies props; the build engine writes the component files. That is what keeps output consistent between generations.

What ships

Category Blocks
Navigation nav-simple
Hero hero-centered, hero-split
Features features-grid
Proof stats-row, logos-strip, testimonials-grid
Commerce pricing-tiers
Content content-prose, gallery-grid, team-grid
Conversion faq-list, cta-banner, contact-form
Footer footer-simple

How a block reaches a project

  1. The model returns blocks: ["hero-split", "pricing-tiers"] alongside its file changes.
  2. The engine writes each block's template to src/sections/HeroSplit.jsx and src/sections/PricingTiers.jsx — unless the plan wrote that path itself, in which case the model's version wins.
  3. The model's App.jsx imports them and passes props.

A file the user has locked is never overwritten.

Adding a block

Admin → Component blocks → New. Four things matter:

  • Slug — what the model references. Permanent once in use.
  • Description — written for the model: say when to reach for this section, not what it looks like. This is what decides whether pages come out coherent.
  • Props schema — the contract the model fills in.
  • Template — the component source. Use existing class names from resources/blocks/library.css; do not introduce new styling.

The prompt manifest is cached per framework and evicted automatically when a block changes.

Writing a good description

Bad: "A hero with a title and two buttons."

Good: "Left-aligned copy beside a generated visual panel. Use when the headline needs supporting bullets, or when a centered hero feels too sparse."

The second tells the model when to choose it. That is the whole job.

House rules for templates

  • Style only with tokens and existing library classes
  • No external images — inline SVG or CSS artwork, so sites work offline
  • Real alt text and labeled controls
  • Native elements where they exist (<details> for FAQs, <form> for contact)