Text

Brutalist passive text content and reusable typography inputs.

brutalist-text-root is a draft reusable Text atom. It inherits the Base Text input vocabulary and content slot through asTextRoot(). The Brutalist theme owns typography and ink. This is Proto UI’s own Text projection, with no claim of upstream Text-component API parity.

Web Components React Vue Vue 2

Loading interactive preview… The article and source are ready to read. Interactive controls will appear here when ready.

.proto-previewer__skeleton { display: none !important; }

The examples are actual package prototypes. Their outer stack supplies only demonstration layout; each Text instance owns its content and its applicable presentation. The examples add no click handlers or editing state.

Use Text

import * as React from 'react';
import { createReactAdapter } from '@proto.ui/adapter-react';
import { brutalistTextRoot } from '@proto.ui/prototypes-brutalist/text';

const Text = createReactAdapter(React)(brutalistTextRoot, { rootTag: 'span' });

export function SectionTitle() {
  return (
    <h1>
      <Text size="4xl" font="heading" weight="semibold" leading="tight" tracking="tight">
        Account settings
      </Text>
    </h1>
  );
}

The same subpath and package root also export textRoot and BrutalistTextRoot aliases. Family-aliased types retain the Base input contract.

rootTag: 'span' is Web Adapter configuration, not a Text prop. The surrounding native h1, p, label or a remains the document or interaction owner. For a label, keep htmlFor/for on the native label; for a link, keep href, target and download behavior on the native anchor. Text does not create a second focus stop or synthesize activation.

Inputs

Prop	Values	Default
`size`	`xs`, `sm`, `base`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`	`base`
`tone`	`default`, `muted`, `inherit`	`default`
`weight`	`normal`, `medium`, `semibold`, `bold`	`normal`
`font`	`body`, `heading`, `mono`	`body`
`leading`	`tight`, `snug`, `normal`, `relaxed`	`normal`
`tracking`	`normal`, `tight`	`normal`
`emphasis`	`normal`, `italic`	`normal`
`decoration`	`none`, `underline`, `line-through`	`none`

tone="inherit" keeps the enclosing semantic or Surface owner’s foreground, which is useful for contrast on solid or accent surfaces. Removing a prop restores its default. The single anonymous slot preserves authored text and children. There are no exposed states, methods or events. No page role, copy, heading level, asChild, tag, href, for, content parser, editor, or automatic responsive breakpoint is part of this API.

Adapter and Compiler boundary

The implemented Web profile is exercised through Web Components, React, Vue 3 and Vue 2, including property changes/removal, retained content and native-owner composition. Web compiler source-closure and generated-facade checks are separate from that Adapter evidence; they do not establish arbitrary Prototype AOT or native parity.

The CLI’s unsupported GPUI target is rejected. Native GPUI typography mapping still omits font-style, letter-spacing and text-decoration-line; those omissions are diagnostic limits, not an equivalent rendering. tone="inherit" currently reports UnsupportedValue(color, inherit) on GPUI. Unknown style tokens report Unsupported Proto UI style tokens rather than silently succeeding. Real-browser visual acceptance and each target’s execution evidence remain distinct from source and DOM tests.

Authority

P-BRUTALIST-TEXT and T-TEXT-0001 govern this slice. The source is packages/prototypes/brutalist/src/text/. Catalog lifecycle remains draft.