Usage

import { Text } from '~/components/ui/text'

Examples

As another element

The Text component renders as an p element by default. Use the as property to specify a different HTML tag.

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

Add Styled Primitive

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

import { styled } from 'styled-system/jsx'
import { type TextVariantProps, text } from 'styled-system/recipes'
import type { ComponentProps, StyledComponent } from 'styled-system/types'

type ParagraphProps = TextVariantProps & { as?: React.ElementType }

export type TextProps = ComponentProps<typeof Text>
export const Text = styled('p', text) as StyledComponent<'p', ParagraphProps>

import type { ComponentProps, JSX } from 'solid-js'
import { styled } from 'styled-system/jsx'
import { type TextVariantProps, text } from 'styled-system/recipes'
import type { StyledComponent } from 'styled-system/types'

type ParagraphProps = TextVariantProps & { as?: JSX.Element }

export type TextProps = ComponentProps<typeof Text>
export const Text = styled('p', text) as StyledComponent<'p', ParagraphProps>

No snippet found

2

Add Re-Export

To improve the developer experience, re-export the styled primitives in~/components/ui/text.tsx.

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

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

3

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: {
        color: 'fg.default',
        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' },
    },
  },
})

Make it yours