Help

Text

A component that displays text using the typography styles from Medusa's design system.

In this guide, you'll learn how to use the Text component.

Text

Was this example helpful?

Usage#

Code
import { Text } from "@medusajs/ui"

Code
<Text>Text</Text>

This component is based on the p element and supports all of its props

Prop	Type	Default
`asChild`	`boolean`	`false`
`as`	`"p"` \|`"span"` \|`"div"`	`"p"`
`size`	`"xsmall"` \|`"small"` \|`"base"` \|`"large"` \|`"xlarge"`	`"base"`
`weight`	`"regular"` \|`"plus"`	`"regular"`
`family`	`"sans"` \|`"mono"`	`"sans"`
`leading`	`"normal"` \|`"compact"`	`"normal"`

Was this helpful?

Base size

Large size

XLarge size

Was this example helpful?

Regular weight

Plus weight

Was this example helpful?

Sans font

Mono font

Was this example helpful?

Normal leading

Compact leading

Was this guide helpful?