This entire product site is authored, validated, and rendered with Sights.See how it works
Menu

Component system

Complete patterns give authors room without giving pages control.

Sights components are organized around jobs a page needs to do: introduce, explain, compare, prove, guide, publish, convert, or extend. Each one owns its markup, layout, accessibility, and behavior.

See the authoring workflow
A modular component catalog showing hero, feature, comparison, editorial, and call-to-action patterns

Canonical catalog

A compact library with broad page coverage.

The current product slice prefers fewer finished components over hundreds of styling primitives that push layout decisions back into page content.

Built-in components
24
Marketing, editorial, people, proof, navigation-adjacent, and lead-interface patterns.
Semantic section tones
4
Default, subtle, inverse, and brand roles remain theme-owned.
Motion presets
3
Reveal, stagger, and bounded hero parallax remain progressive enhancement.
Trusted primitives
7
Implementation tools stay documented without becoming unrestricted page blocks.

Component families

Choose by author intent, not visual resemblance.

The catalog distinguishes what a section is for, when it belongs, and which nearby pattern is a better choice.

  • Open and orient

    Hero, breadcrumbs, section introductions, and value strips establish hierarchy and the next useful path.

  • Explain and structure

    Split content, editorial media, feature grids, process steps, rich text, facts, and FAQ make different kinds of information readable.

  • Compare and prove

    Comparison tables, metrics, testimonials, representative work, people, and organization marks add structured evidence with explicit semantics.

  • Route and discover

    Card grids, project grids, post grids, people grids, and related content make destination choices clear.

  • Showcase and persuade

    Showcase stories and full-bleed calls to action create high-emphasis moments without bespoke page sections.

  • Collect and calculate

    A non-persistent consultation interface demonstrates the form boundary; a site-owned calculator proves isolated custom interaction.

Manifest-backed

One definition keeps code, documentation, and validation from drifting.

Every built-in and site-owned component declares its stable name, status, category, authoring guidance, strict props schema, variants, accessibility requirements, client and server runtime, thumbnail preset, examples, and renderer.

The registry is generated from those definitions. An unknown component never quietly returns an empty string, and a renderer cannot join the site without a valid manifest.

  • For authorsClear use-when and avoid-when guidance, schemas, variants, examples, and actionable validation.
  • For implementersA typed API, shared primitives, semantic theme tokens, runtime budgets, and an automatic review surface.
  • For reviewersStable detail routes with themed and neutral previews, responsive modes, usage links, and noindex isolation.

Decision order

Reuse escalates deliberately.

The sequence prevents both component sprawl and page-specific hacks while leaving a real extension path when repeated needs prove it.

  1. Use an existing component

    Start with the catalog entry whose purpose matches the content and supply only its documented props.

  2. Reuse an existing page pattern

    Follow a proven section sequence when a similar route already solves the same information problem.

  3. Use a registered template

    Resolve repeated record-driven pages, such as posts or profiles, through one validated content shape.

  4. Add a custom component

    Cross into trusted code only when the catalog cannot express a genuine site capability or repeated pattern.

  5. Promote proven behavior

    Move a custom pattern into the platform only after more than one real consumer establishes its reusable contract.

Presentation without leakage

The theme changes every component without rewriting a page.

See how semantic color, typography, spacing, surfaces, shape, and motion create a distinct site identity on top of the shared catalog.

Explore Sights theming