https://framer.com/m/TextPro-UO8yfD.js
TextPro
TextPro renders text against the theme type scale rather than a fixed size, and handles truncation and alignment. Reach for it inside components and slots — page headings stay native so the document outline survives.
Examples
Live specimens for every control the component exposes.
Default
Content is a plain string rendered at the Body step in the theme font.
Type scale
styles picks one of the eight steps defined in the theme fontJSON, so text tracks the system rather than a hardcoded size.
H1
LargeTitle
Title
Headline
Body
Callout
Detail
Tiny
Weight
weight maps to the theme font-weight tokens rather than raw numbers.
light
regular
medium
semibold
bold
Colour
color takes a theme token, so text inverts correctly with the surface in dark mode.
Text/text-color
Text/text-secondary
Core/primary
Semantic/warning
Alignment
With sysAlign off, align controls the text inside a container wider than the line.
align left
align center
align right
Truncation
truncate caps the text at a line count and adds an ellipsis, keeping cards on a grid.
truncate 1
truncate 2
no truncation
Sizing
sizing decides whether the text fills its container or shrinks to its content.
fit
fill
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for TextPro
Text must follow the theme type scale rather than a fixed size.
Multi-line copy needs an ellipsis at a set line count.
A slot needs consistently styled rich-text content.
Text should fill or hug its container on demand.
Reach for something else
The text is a page heading — native text keeps the h1/h2 outline.
The text must be editable inline on the canvas.
You need per-character or per-word text animation.
Io — UI Basics
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.