Text

Body text primitive.

stable

Preview

Default body text at base size.

Muted small text for secondary info.

Semibold emphasis.

Code

tsx

import { Text } from "@/components/ui/text";

export function Example() {
  return (
    <div className="space-y-2">
      <Text>Default body text at base size.</Text>
      <Text variant="muted" size="sm">Muted small text for secondary info.</Text>
      <Text weight="semibold">Semibold emphasis.</Text>
    </div>
  );
}

Props

Prop	Type	Default	Description
size	`"xs" \| "sm" \| "base" \| "lg"`	"base"	Text size.
tone	`"fg" \| "muted" \| "subtle" \| "accent" \| "danger"`	"fg"	Color tone.
as	`"p" \| "span" \| "div"`	"p"	Underlying element.
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Body text primitive. Use `as="span"` for inline.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/text.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

import { cn } from "@/lib/utils";
import { type VariantProps, cva } from "class-variance-authority";
import { type HTMLAttributes, forwardRef } from "react";

const textVariants = cva("", {
  variants: {
    size: {
      xs: "text-xs",
      sm: "text-sm",
      md: "text-base",
      lg: "text-lg",
    },
    variant: {
      default: "text-fg",
      muted: "text-fg-muted",
      subtle: "text-fg-subtle",
    },
    weight: {
      normal: "font-normal",
      medium: "font-medium",
      semibold: "font-semibold",
    },
  },
  defaultVariants: { size: "md", variant: "default", weight: "normal" },
});

export interface TextProps
  extends HTMLAttributes<HTMLParagraphElement>,
    VariantProps<typeof textVariants> {
  as?: "p" | "span" | "div";
}

export const Text = forwardRef<HTMLParagraphElement, TextProps>(
  ({ className, as: Tag = "p", size, variant, weight, ...props }, ref) => (
    <Tag ref={ref} className={cn(textVariants({ size, variant, weight }), className)} {...props} />
  ),
);
Text.displayName = "Text";

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmText (extends Label). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmText;

PrizmText()
PrizmText(String text)

Prop	Type	Default	Description
Size	`enum { XS, SM, MD, LG }`	MD	12 / 14 / 16 / 18 px.
Tone	`enum { DEFAULT, MUTED, SUBTLE }`	DEFAULT	fg / fg-muted / fg-subtle.
Weight	`enum { NORMAL, MEDIUM, SEMIBOLD }`	NORMAL	400 / 500 / 600.

Thin Label subclass with size/tone/weight presets (chainable setters), via the .prizm-text rules. Mirrors components/ui/text.tsx.