Make it yours

Copy and paste the following code into your panda.config.ts and update if needed.

import { defineConfig } from '@pandacss/dev'
import { createPreset } from '@park-ui/panda-preset'

export default defineConfig({
  preflight: true,
  presets: [
    '@pandacss/preset-base',
    createPreset({
      accentColor: 'neutral',
      grayColor: 'neutral',
      borderRadius: 'sm',
    }),
  ],
  include: ['./src/**/*.{js,jsx,ts,tsx,astro,vue}'],
  jsxFramework: '__JS_FRAMEWORK__',
  outdir: 'styled-system',
})

Typography

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 label 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>
</>

<>
  <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.

<>
  <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

npx @park-ui/cli components add text

1

Styled Primitive

Copy the code snippet below into ~/components/ui/primitives/text.tsx

'use client'
import type { Assign, HTMLArkProps } from '@ark-ui/react'
import React from 'react'
import { css, cx } from 'styled-system/css'
import { splitCssProps } from 'styled-system/jsx'
import { type TextVariantProps, text } from 'styled-system/recipes'
import type { JsxStyleProps } from 'styled-system/types'

type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref']

type AsProp<C extends React.ElementType> = {
  as?: C
}

type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P)

type PolymorphicComponentProp<C extends React.ElementType, Props = {}> = React.PropsWithChildren<
  Props & AsProp<C>
> &
  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>

type PolymorphicComponentPropWithRef<
  C extends React.ElementType,
  Props = {},
> = PolymorphicComponentProp<C, Props> & { ref?: PolymorphicRef<C> }

export type TextProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<
  C,
  Assign<JsxStyleProps, HTMLArkProps<'p'>> & TextVariantProps
>

type PolymorphicComponent = <C extends React.ElementType = 'p'>(
  props: TextProps<C>,
) => React.ReactNode | null

export const Text: PolymorphicComponent = React.forwardRef(
  <C extends React.ElementType = 'p'>(props: TextProps<C>, ref?: PolymorphicRef<C>) => {
    const [variantProps, textProps] = text.splitVariantProps(props)
    const [cssProps, localProps] = splitCssProps(textProps)
    const { className, as, ...otherProps } = localProps
    const styles = text(variantProps)
    const Component = props.as || 'p'

    return <Component ref={ref} className={cx(styles, css(cssProps), className)} {...otherProps} />
  },
)

import type { Assign, HTMLArkProps } from '@ark-ui/solid'
import { mergeProps, splitProps } from 'solid-js'
import { Dynamic } from 'solid-js/web'
import { css, cx } from 'styled-system/css'
import { splitCssProps } from 'styled-system/jsx'
import { type TextVariantProps, text } from 'styled-system/recipes'
import type { JsxStyleProps } from 'styled-system/types'

export interface TextProps extends Assign<JsxStyleProps, HTMLArkProps<'p'>>, TextVariantProps {
  as?: 'p' | 'label' | 'div' | 'span'
}

export const Text = (props: TextProps) => {
  const mergedProps = mergeProps({ as: 'p' }, props)
  const [variantProps, textProps] = splitProps(mergedProps, ['size', 'variant'])
  const [cssProps, elementProps] = splitCssProps(textProps)
  const [localProps, rootProps] = splitProps(elementProps, ['as', 'class'])
  const className = text(variantProps)

  return (
    <Dynamic
      component={localProps.as}
      class={cx(className, css(cssProps), localProps.class)}
      {...rootProps}
    />
  )
}

No snippet found

Extend ~/components/ui/primitives/index.ts with the following line:

export { Text, type TextProps } from './text'

2

Integrate Recipe

If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts:

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' },
    },
  },
})