1. Home
2. Components
3. Typography
4. P

P

A p element with control for typographic attributes.

Features

• Drop-in replacement for the native <p> element.
• Automatically inherits design tokens.
• Allows control of size, weight, alignment, and tracking.

Parts and their API

The tracking's default value depends on the size prop and is controlled through CSS variables: check out the styling section.

Usage

<P>This is a paragraph.</P>

Here's the <P /> component in action.

This is a paragraph.

Source

import { forwardRef, type HTMLAttributes } from 'react'
import { cn } from '#app/utils/tailwind-merge.ts'

/**
 * A p (paragraph) component.
 */
const P = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => <p ref={ref} className={cn('p', className)} {...props} />)
P.displayName = 'P'

export { P }