<Text />

Text provides performant, consistently themed typography for your application.


Use the variant prop to switch between typography styles. You can omit a variant value to default to 'body'.

Componentry Components

<Text variant='h3'>Componentry Components</Text>

Variant to element mapping

Text renders elements based on its variant value. Out of the box Componentry includes the following text elements mapping:

const textElementMap = { h1: 'h1', h2: 'h2', h3: 'h3', body: 'p', code: 'code', small: 'small', }

With this default mapping the following usage would render an h1 and p element:

<Text variant="h1">Componentry Components</Text> // ^ Renders an h1 element <Text>Must go faster.</Text> // ^ Defaults to 'body' variant, rendering a p element

You can customize this mapping using the exported configureTextElementsMap helper. Any mapping you pass is merged with the default, simplifying adding new variants and customizing the defaults.

import { configureTextElementsMap } from 'componentry' // Add a title variant that renders an h1, and render a div instead of a p // for body variants. configureTextElementsMap({ title: 'h1', body: 'div', })




Truncates overflowing text with an ellipses


Display variant

"body" | "code" | "h1" | "h2" | "h3" | "small"

TypeScript customization

You can use module augmentation to customize the TypeScript types for any of Text's props:

declare module 'componentry/types/components/Text/Text' { interface TextPropsOverrides { // ... overwrite any types for Text props ... } }

See the TypeScript guide for more information.

StylingText styles

Base class applied to all variants for shared structural styles
Variant class applied when `variant="body"`
Variant class applied when `variant="h1"`
Variant class applied when `variant="h2"`
Variant class applied when `variant="h3"`