Exp 12 — ursprung/ui

A UI element is an import.

The specimens below are UI elements from ursprung/ui. This page did not write a <span>, the stack <div>s, or an <hr>. Each component returned one, because that is what a UI element is on the web Target: a component over a per-target Intrinsic element. Text is a span. VStack is a column. HStack is a row. ZStack is an overlapping grid. Divider is an hr. Spacer is empty space that grows. Token props and layout classes come first; the author class is appended. spacing="md" is a Foundations token. Absent spacing leaves the gap class off. The hr carries no package class. ZStack children pass through; the sheet, not a wrapper, puts them in one cell.

import { Text } from "ursprung/ui"

hello from ursprung/ui

font="body" class="font-mono"

body token, then author class

VStack spacing="md"

stacked onestacked two

HStack class="font-mono"

row onerow two

ZStack class="font-mono"

backfront

Divider class="opacity-40"

above the rule
below the rule

Spacer class="font-mono"

left
right