<Text weight="medium" tone="strong">Production</Text><Text>acme-api · fra1 · 128 MB</Text><Text tone="subtle">Last deployed 4 minutes ago</Text>

Almost everything in an application is 14px. Hierarchy is carried by weight and colour, not by size — which is why Text has a tone and a weight prop, and why its size prop is the one you reach for least.

• Medium names a surface or a group: field labels, section labels, card titles, table headers.
• Normal is everything living inside one: button labels, navigation items, table cells, body copy.
• text-heyo-default is the thing being acted on. text-heyo-subtle is context.

Usage

import { Text } from "@heyo-sh/heyo-ui";<Text tone="subtle">Last deployed 4 minutes ago</Text>;

Tones

<Text tone="strong">strong</Text><Text tone="default">default</Text><Text tone="subtle">subtle</Text><Text tone="inactive">inactive</Text><Text tone="success">success</Text><Text tone="warning">warning</Text><Text tone="danger">danger</Text>

Sizes

12, 13, 14, 16, 18, 22 and 28px. The jump from base to lg is already a statement; 2xl and 3xl are for a page title or a number, not for a paragraph.

<Text size="xs">xs — 12px</Text><Text size="sm">sm — 13px</Text><Text size="base">base — 14px</Text><Text size="lg">lg — 16px</Text><Text size="xl">xl — 18px</Text><Text size="2xl">2xl — 22px</Text><Text size="3xl">3xl — 28px</Text>

Mono and truncate

mono switches to the monospace stack — identifiers, hashes, regions. truncate clips to one line with an ellipsis, and sets the min-width: 0 that makes truncation work inside a flex row.

<Text mono tone="subtle">dpl_8f21c3d9</Text><Text truncate>A single line that is far too long to fit in the space it has been given</Text>

Heading

Heading renders h1 to h6 with the right size for the level. as on Text does the same job when you need a different element without a heading's semantics.

<Heading level={1}>Project settings</Heading><Heading level={2}>Environment variables</Heading><Heading level={3}>Production</Heading>

Code

Inline code on the recessed surface. It pairs with Kbd for shortcut documentation and with CodeBlock for anything longer than a phrase.

<Text>Run <Code>bun add @heyo-sh/heyo-ui</Code> to install.</Text>

Properties

Text

Heading

Code

textVariants

The cva definition, for anything that needs the same type without the component.

import { textVariants } from "@heyo-sh/heyo-ui";<time className={textVariants({ size: "sm", tone: "subtle" })}>4m ago</time>;