Text

A versatile typography component for displaying text with various styles and sizes.

Storybook

Radix UI Docs

Source

Extra Small Text

Small Text

Medium Text

Large Text

Extra Large Text

2XL Text

Automatic Installation

This method is still working on progress, please use manual installation for now.

Manual Installation

Install dependencies

npm install radix-ui

Copy the code

components/text/text.tsx

import { Slot } from 'radix-ui'
import * as React from 'react'
import { type TextStyles, textStyles } from './text.css'
 
interface TextProps extends React.ComponentPropsWithoutRef<'p'>, TextStyles {
  asChild?: boolean
}
 
const Text = React.forwardRef<HTMLParagraphElement, TextProps>(
  ({ className, size, weight, align, variant, asChild = false, ...props }, forwardedRef) => {
    const Comp = asChild ? Slot.Root : 'p'
    return (
      <Comp
        ref={forwardedRef}
        className={textStyles({ size, weight, align, variant, className })}
        {...props}
      />
    )
  }
)
 
Text.displayName = 'Text'
 
export { Text }

Usage

Imports

import { Text } from '#/components/text'

Example

Browse the Storybook for more examples.