Text

Base passive text content and reusable typography inputs.

base-text-root is a draft reusable Text atom. Base owns normalized presentation inputs and one passive content slot. It remains visually neutral: the typography choices become visible through the Shadcn or Brutalist projection, rather than importing a default design language into Base.

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 { textRoot } from '@proto.ui/prototypes-base/text';

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

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

This Base example preserves the native heading and normalizes inputs; choose a styled Text export to realize those axes as family-owned typography. asTextRoot, TextRootProps, and TextRootExposes are also exported from the same subpath and package root.

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-BASE-TEXT and T-TEXT-0001 govern this slice. The source is packages/prototypes/base/src/text/. Catalog lifecycle remains draft.