Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body

This is default body text. It renders as a paragraph using Space Grotesk at the base size. Good for content, descriptions, and general prose.

This is small text, useful for captions, labels, and secondary information.

Code

Use the code variant for inline code rendered in Space Mono.

const x = 42;
console.log(x);

Custom Element

h3 styling rendered as a spanBody text rendered as a label

Props

Prop	Type	Description
variant	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "body" \| "small" \| "code"	Visual style (default: body)
as	ElementType	Override the rendered HTML element
className	string	Additional classes on the root element

Usage

<Text variant="h1">Page Title</Text> <Text variant="h2">Section Heading</Text> <Text>Body paragraph text.</Text> <Text variant="small">Caption or secondary text.</Text> <Text variant="code" as="code">inline code</Text> <Text variant="h3" as="span">h3 style on a span</Text>