Components
Text

Text

To display text in a variety of sizes and weights.

Usage

Sphinx of black quartz, judge my vow.

<Text>Sphinx of black quartz, judge my vow.</Text>

Examples

As another element

Utilize the as property to specify the HTML tag. This changes semantic markup without affecting visual style.

This is a p element.

This is a div element.
This is a span element.
<>
  <Text as="p">
    This is a <Code>p</Code> element.
  </Text>
  <Text as="label">
    This is a <Code>label</Code> element.
  </Text>
  <Text as="div">
    This is a <Code>div</Code> element.
  </Text>
  <Text as="span">
    This is a <Code>span</Code> element.
  </Text>
</>

Font Size

Use size or textStyle for text size. It makes line height and spacing smaller as text size grows and also ensures text size is even for better layout.

Ag

Ag

Ag

Ag

Ag

Ag

Ag

Ag

Ag

Ag

Ag

<>
  <Text size="xs">Ag</Text>
  <Text size="sm">Ag</Text>
  <Text size="md">Ag</Text>
  <Text size="lg">Ag</Text>
  <Text size="xl">Ag</Text>
  <Text size="2xl">Ag</Text>
  <Text size="3xl">Ag</Text>
  <Text size="4xl">Ag</Text>
  <Text size="5xl">Ag</Text>
  <Text size="6xl">Ag</Text>
  <Text size="7xl">Ag</Text>
</>

Font Weight

Use the fontWeight prop to set the text weight.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

<>
  <Text fontWeight="light">Sphinx of black quartz, judge my vow.</Text>
  <Text fontWeight="normal">Sphinx of black quartz, judge my vow.</Text>
  <Text fontWeight="medium">Sphinx of black quartz, judge my vow.</Text>
  <Text fontWeight="semibold">Sphinx of black quartz, judge my vow.</Text>
  <Text fontWeight="bold">Sphinx of black quartz, judge my vow.</Text>
</>

Installation

1

Add Component

Insert code snippet into your project. Update import paths as needed.

import { forwardRef, useMemo } from 'react'
import { type HTMLStyledProps, type StyledComponent, styled } from 'styled-system/jsx'
import { type TextVariantProps, text } from 'styled-system/recipes'

type As = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'

export type TextProps = {
  as?: As
} & TextVariantProps &
  HTMLStyledProps<As>

export const Text = forwardRef<HTMLHeadingElement, TextProps>((props, ref) => {
  const { as = 'p', ...localProps } = props
  const Dynamic = useMemo(() => styled(as, text) as StyledComponent<As>, [as])

  return <Dynamic ref={ref} {...localProps} />
})

Text.displayName = 'Text'
2

Add Recipe

This step is necessary only if you do not use any of the Park UI plugins.

import { defineRecipe } from '@pandacss/dev'

export const text = defineRecipe({
  className: 'text',
  jsx: ['Heading', 'Text'],
  variants: {
    variant: {
      heading: {
        fontWeight: 'semibold',
      },
    },
    size: {
      xs: { textStyle: 'xs', lineHeight: '1.125rem' },
      sm: { textStyle: 'sm', lineHeight: '1.25rem' },
      md: { textStyle: 'md', lineHeight: '1.5rem' },
      lg: { textStyle: 'lg', lineHeight: '1.75rem' },
      xl: { textStyle: 'xl', lineHeight: '1.875rem' },
      '2xl': { textStyle: '2xl', lineHeight: '2rem' },
      '3xl': { textStyle: '3xl', lineHeight: '2.375rem' },
      '4xl': { textStyle: '4xl', lineHeight: '2.75rem', letterSpacing: '-0.02em' },
      '5xl': { textStyle: '5xl', lineHeight: '3.75rem', letterSpacing: '-0.02em' },
      '6xl': { textStyle: '6xl', lineHeight: '4.5rem', letterSpacing: '-0.02em' },
      '7xl': { textStyle: '7xl', lineHeight: '5.75rem', letterSpacing: '-0.02em' },
    },
  },
})

Previous

Link