Skip to content

Text API

import { Text } from "@stratakit/bricks";
// OR
import Text from "@stratakit/bricks/Text";
Base element: <div>

An element with text styles applied. Useful for paragraphs, headings, and other text content.

Example usage:

<Text variant="display-sm">Hello, World!</Text>

Use the render prop to change the underlying element (defaults to a <div>):

<Text render={<h1 />} variant="headline-lg">Hello, World!</Text>
Type: "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "body-lg" | "body-md" | "body-sm" | "caption-lg" | "caption-md" | "caption-sm" | "mono-sm" (required)

The typography variant to use.