Span

Span component.

Usage

SpanExample.tsx

<p className="font-serif text-xl">
	If I have a component with custom typographical properties and <Span>I need to opt back into my design system's typography</Span>, I can use the <Code>{'<Span />'}</Code> component.
</p>

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

If I have a component with custom typographical properties and I need to opt back into my design system's typography, I can use the <Span /> component.

Features

Drop-in replacement for the native <span> element.
Opts-in to your design system's typographic styles.

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.

Source

span.tsx

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

/**
 * A span component.
 */
const Span = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLSpanElement>>(({ className, ...props }, ref) => <span ref={ref} className={cn('span', className)} {...props} />)
Span.displayName = 'Span'

export { Span }

Styling

tailwind.css

.span {
	@apply font-sans;
}