Text

Foundational typography primitives — paragraph text, strong emphasis, inline code, and styled links for consistent body copy.

Preview

Basic paragraph

import { Text } from '@/registry/ui-kit/tailwind-text/react'

function Example() {
  return (
    <Text>
      This is a paragraph of body text with the default styling applied.
      It uses a comfortable reading size with muted color.
    </Text>
  )
}

With strong and code

import { Text, Strong, Code } from '@/registry/ui-kit/tailwind-text/react'

function Example() {
  return (
    <Text>
      Use <Strong>strong text</Strong> for emphasis and <Code>inline code</Code> for
      technical terms.
    </Text>
  )
}

With link

import { Text, TextLink } from '@/registry/ui-kit/tailwind-text/react'

function Example() {
  return (
    <Text>
      Read the <TextLink href="#">documentation</TextLink> to learn more.
    </Text>
  )
}

Component API

Prop	Default	Description
`Text`	`—`	Renders a paragraph element with base body text styling.
`Strong`	`—`	Renders a strong element with medium-weight emphasis.
`Code`	`—`	Renders an inline code element with mono font and subtle background.
`TextLink`	`—`	Renders a styled anchor with underline decoration.
`className`	`""`	Additional CSS classes (supported on all components).

Source Code

"use client";

import { forwardRef } from "react";

/* ── Text ── */

interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
  className?: string;
  children: React.ReactNode;
}

const Text = forwardRef<HTMLParagraphElement, TextProps>(
  ({ className = "", children, ...props }, ref) => {
    return (
      <p
        ref={ref}
        className={`text-base text-zinc-500 dark:text-zinc-400 ${className}`}
        {...props}
      >
        {children}
      </p>
    );
  }
);
Text.displayName = "Text";

/* ── Strong ── */

interface StrongProps extends React.HTMLAttributes<HTMLElement> {
  className?: string;
  children: React.ReactNode;
}

const Strong = forwardRef<HTMLElement, StrongProps>(
  ({ className = "", children, ...props }, ref) => {
    return (
      <strong
        ref={ref}
        className={`font-medium text-zinc-900 dark:text-zinc-100 ${className}`}
        {...props}
      >
        {children}
      </strong>
    );
  }
);
Strong.displayName = "Strong";

/* ── Code ── */

interface CodeProps extends React.HTMLAttributes<HTMLElement> {
  className?: string;
  children: React.ReactNode;
}

const Code = forwardRef<HTMLElement, CodeProps>(
  ({ className = "", children, ...props }, ref) => {
    return (
      <code
        ref={ref}
        className={`rounded bg-zinc-100 px-1 py-0.5 font-mono text-sm font-medium text-zinc-900 dark:bg-zinc-800 dark:text-zinc-200 ${className}`}
        {...props}
      >
        {children}
      </code>
    );
  }
);
Code.displayName = "Code";

/* ── TextLink ── */

interface TextLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  className?: string;
  children: React.ReactNode;
}

const TextLink = forwardRef<HTMLAnchorElement, TextLinkProps>(
  ({ className = "", children, ...props }, ref) => {
    return (
      <a
        ref={ref}
        className={`text-zinc-900 underline decoration-zinc-400/40 hover:decoration-zinc-900 dark:text-zinc-100 dark:decoration-zinc-500/40 dark:hover:decoration-zinc-100 ${className}`}
        {...props}
      >
        {children}
      </a>
    );
  }
);
TextLink.displayName = "TextLink";

export { Text, Strong, Code, TextLink };
export default Text;