Text | Park UI

Sphinx of black quartz, judge my vow.

Installation

npx @park-ui/cli@next add text

Add Component

Copy the code snippet below into you components folder.

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

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

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

Integrate Recipe

Integrate this recipe in to your Panda config.

import { defineRecipe } from '@pandacss/dev'

export const text = defineRecipe({
  className: 'text',
  variants: {},
})

Usage

import { Text } from '@/components/ui'

<Text>This is the text component</Text>

Examples

Sizes

Use the textStyle prop to change the size of the text.

Weights

Use the fontWeight prop to change the weight of the text.

Sphinx of black quartz, judge my vow.

Truncation

Use the truncate prop to truncate the text after a single line.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Line Clamp

Use the lineClamp prop to truncate the text after a certain number of lines.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ref

Here's how to access the underlying element reference

'use client'
import { useRef } from 'react'
import { Text } from '@/components/ui'

export const App = () => {
  const ref = useRef<HTMLParagraphElement>(null)
  return <Text ref={ref}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
}

Props

Prop	Default	Type
No props to display