The command includes the component’s shared dependencies. Your project keeps editable source files.
Using typography
Choose a role such as Hero, SectionTitle, Body, Meta, or Identifier to establish a readable hierarchy.
Use as to select the semantic element while retaining the intended text treatment.
API
Compose the exported parts below. The prop types are read from the React source during the registry build.
Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.
TypographyProps
Prop
Type
Required
variant
"default" | null | undefined
No
size
"default" | null | undefined
No
as
React.ElementType
No
HeroProps
Prop
Type
Required
variant
"default" | null | undefined
No
size
"default" | null | undefined
No
as
React.ElementType
No
DisplayProps
Prop
Type
Required
variant
"default" | null | undefined
No
size
"default" | null | undefined
No
as
React.ElementType
No
SectionTitleProps
Prop
Type
Required
variant
"default" | null | undefined
No
size
"default" | null | undefined
No
as
React.ElementType
No
TitleProps
Prop
Type
Required
variant
"default" | null | undefined
No
size
"default" | null | undefined
No
as
React.ElementType
No
LeadProps
Prop
Type
Required
variant
"default" | null | undefined
No
size
"default" | null | undefined
No
as
React.ElementType
No
BodyProps
Prop
Type
Required
variant
"default" | null | undefined
No
size
"default" | null | undefined
No
as
React.ElementType
No
BodySecondaryProps
Prop
Type
Required
variant
"default" | null | undefined
No
size
"default" | null | undefined
No
as
React.ElementType
No
ControlTextProps
Prop
Type
Required
variant
"default" | null | undefined
No
size
"default" | null | undefined
No
as
React.ElementType
No
MetaProps
Prop
Type
Required
variant
"default" | null | undefined
No
size
"default" | null | undefined
No
as
React.ElementType
No
CapsProps
Prop
Type
Required
variant
"default" | null | undefined
No
size
"default" | null | undefined
No
as
React.ElementType
No
ValueProps
Prop
Type
Required
variant
"default" | null | undefined
No
size
"default" | null | undefined
No
as
React.ElementType
No
IdentifierProps
Prop
Type
Required
variant
"default" | null | undefined
No
size
"default" | null | undefined
No
as
React.ElementType
No
Accessibility
Choose heading levels from the document structure and use paragraphs, labels, and code elements according to their meaning.
States and appearance
rest
For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.
Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.
Everyday type
Room to think.
Good things take shape
A considered collection
Start with the useful details
Clear language gives ideas somewhere to land.
Body text keeps longer thoughts comfortable to read, with a steady rhythm and a little space.