HAUSE

Snippet

A labeled block of code or terminal output, verbatim on the ink — the on-ramp form, promoted when two sites needed the same shape.

MEET THE FORM ↓
01 / THE ENCOUNTERA STATEMENT — THE READER READS

A STUDY IN SNIPPET

The useful bit. Kept exact.

A line of React becomes a visible statement. The code stays literal; its result gets its own space.

01 / THE INPUT

REACT

<Statement text="Give meaning a form." />

02 / THE OUTPUT

Give meaning a form.

This is an executable example shown beside its actual rendering, not pseudocode.

INSPECT THE REUSABLE LIBRARY COMPONENT

ONE ACT, GIVEN A FORM

<Statement text="Give meaning a form." />

02 / THE DECISION

An act.
Not a container.

YOU ARE SHOWING WHAT HOLDS IT UP

Showing the code or output itself.

Is this verbatim, and would paraphrasing it be a lie?

EXPLORE THE SELECTION GRAMMAR ↗

What is the Snippet form in HAUSE, and when do you use it?

The Snippet form is a HAUSE statement — a labeled block of code or terminal output, verbatim on the ink — the on-ramp form, promoted when two sites needed the same shape. The on-ramp form: hause.design's Use page invented it, vindex3's Get Started needed the same shape, and two sites doing one thing differently is exactly what a design system exists to stop. A kicker names what the block is; the block itself is verbatim monospace on the ink panel, scrolling sideways rather than wrapping.

origin — hause.design · Use · 2026-08-30

THE LIBRARY’S OWN ACCOUNT

Behind the form.

components/forms/Snippet.tsx

The on-ramp form: hause.design's Use page invented it, vindex3's Get Started needed the same shape, and two sites doing one thing differently is exactly what a design system exists to stop. A kicker names what the block is; the block itself is verbatim monospace on the ink panel, scrolling sideways rather than wrapping. An optional aside carries the one sentence of context that belongs beside the code rather than in a paragraph above it.

THE STATEMENT’S DISCIPLINE

Every statement is prose in the three voices — editorial for claims, system for explanation, evidence for measurement. Server-renderable, no interaction: the reader reads, and nothing about the form depends on JavaScript arriving.

03 / MAKE SOMETHINGINSTALL HAUSE ↗

Give it your subject.

The opening study is an authored demonstration, not an additional component API. Expand the library specimen above to inspect the reusable form. Its props below come directly from the source.

REACT · Snippet

import { Snippet } from "@chrishayuk/hause/components/forms/Snippet";

export function Snippet({
	label,
	code,
	aside,
}: {
	/** The kicker above the block — what this is, in a few words. */
	label: string;
	/** Verbatim code or output. Rendered as-is, monospace. */
	code: string;
	/** One sentence of context, set quietly beneath the block. */
	aside?: string;
})

The import and the complete props contract. For installation and composition, follow the Build guide.

NOT INVENTED IN ISOLATION

A page needed this.

2026-08-30 · Entered the library from hause.design · Use.

Used in vindex3.org. These exhibitions share an author; this is evidence of reuse, not independent adoption.

03 / THE PROBLEMPAGES MACHINES CANNOT READ ↗Strip a page to its text. If the answer disappears, the page never had one — it had a rendering of one.06 / THE PROBLEMTUTORIAL OR REFERENCE, NEVER BOTH ↗The explanation lives on one page and the clause that governs it on another, and every reader has to guess which half holds the answer they came for.

PUBLISHED 31 AUG 2026 · REVISED 9 SEP 2026 · VERSION 0.1.0

CITE

source components/forms/Snippet.tsx · origin hause.design · Use · 2026-08-30 · site build 3ee5339 · built 2026-09-09

CITE THIS

Web page · 0.1.0

Hay, C. (2026). Snippet — a HAUSE statement. In HAUSE — a design system for AI (Version 0.1.0). hause.design. https://hause.design/forms/snippet

The specimen, the source account and the props share one form record. Cite this page or follow its source identifier to inspect the implementation.