Components · Prongs

From intent to element

the intent you choose

the component its domain needs

<h1>

the element it renders

The domain decides the component. Using an intent on the wrong component fails tsc.

Headings, running text and feedback messages.

Everything the user presses: commands, links, navigation and choices.

What the user types or picks in a form.

Page regions and groups.

Images that identify a person or illustrate content, and frames that show another page (media.embed).

Modal interruptions on the native <dialog>: focus stays inside, Escape closes it and the page behind is inert.

Things that open next to the button that opened them, without blocking the page: menus, pickers, extra detail.

Rules that hold for all seven. Each component page repeats only what is different.

Styling
No className or style (Layout takes a className for layout only). If it needs to look different, it is a different intent.
State
pressed and current props, or data-* attributes the intent styles. Never a switched class.
Data-driven values
Through vars, as CSS variables the intent reads.
Layout props
align, width, hideBelow, showBelow, truncate, nowrap: where it sits, never how it looks. Layout takes align, hideBelow and showBelow.
data-intent
Every element carries its intent, for analytics and tests. Never for styling.

Terminal

npx prongs add   # copies them into components/prongs

Copied in, not installed. These pages describe the components as they arrive; if you change one, its props here may no longer match yours.