Foundations

Text

Content typography for the text a user reads, with a heading and body type scale.

Install

npx shadcn@latest add @alix/text

Preview

Heading xl

Heading lg

Heading md

Heading sm

Heading xs

Body copy that wraps nicely across multiple lines.

Usage

<Text variant="headingXl">Heading xl</Text>
<Text variant="headingLg">Heading lg</Text>
<Text variant="headingMd">Heading md</Text>
<Text variant="headingSm">Heading sm</Text>
<Text variant="headingXs">Heading xs</Text>
<Text variant="body">Body copy that wraps nicely.</Text>

{/* variant sets the visual scale; the semantic tag is derived
    (headingXl→h1 … body→p). Override the element with render: */}
<Text variant="headingLg" render={<h1 />}>Page title</Text>

Examples

Level follows the outline, not the size

variant sets only the visual scale; render sets the real tag — so a big callout can still be an h2, and a heading-styled line can stay a paragraph.

A big callout that is still an h2

A heading-styled paragraph, not a heading

<Text variant="headingXl" render={<h2 />}>
  A big callout that is still an h2
</Text>
<Text variant="headingSm" render={<p />}>
  A heading-styled paragraph, not a heading
</Text>

Reading copy

The body variant is for the text a user actually reads — text-pretty keeps the last lines from stranding an orphan.

Turnaround work rewards judgement over volume: the decisions that stabilize a business are made in the first weeks, not the first quarter, and the operating model tells you how you got there long before the liquidity does.

<Text variant="body" className="max-w-prose">
  Turnaround work rewards judgement over volume: the decisions that
  stabilize a business are made in the first weeks, not the first quarter.
</Text>

A titled block

The everyday pairing — a heading and its body, stacked on a Stack so the whole system shares one vertical rhythm.

Transactions and investor services

Turn diligence findings into clear value, risk, and implementation choices — before the deal timetable forces the call.

<Stack gap="sm">
  <Text variant="headingMd" render={<h2 />}>
    Transactions and investor services
  </Text>
  <Text variant="body">
    Turn diligence findings into clear value, risk, and implementation choices.
  </Text>
</Stack>

When to use it

Use it for

Content a user reads — headlines, paragraphs, captions, empty-state and form copy.
Any heading, with render to set the level from the page outline while variant sets the size.
Body copy that should follow the shared type scale rather than one-off font utilities.

Reach for something else

Text inside a control — button labels, input values, badge or tab text — that is UI typography the control owns.
A rendered rich-text tree from a CMS — use Prose, which styles bare semantic tags from one parent.
Forcing a heading level from its visual size; set the level with render to keep the outline correct.

Props

Prop	Type	Default	Description
variant	"headingXl" \| "headingLg" \| "headingMd" \| "headingSm" \| "headingXs" \| "body"	"body"	Visual type scale. The semantic tag is derived from it (headingXl→h1, headingLg→h2, … body→p).
render	ReactElement	—	Overrides the rendered element so heading level follows the page outline, not the visual size (e.g. variant="headingXl" render={<h2 />}).
className	string	—	Extra classes merged after the variant styles.