Heading

Display and section headings.

stable

Preview

Display heading

Section heading

Subsection

Code

tsx

import { Heading } from "@/components/ui/heading";

export function Example() {
  return (
    <div className="space-y-2">
      <Heading size="4xl">Display heading</Heading>
      <Heading size="2xl">Section heading</Heading>
      <Heading size="lg" as="h3">Subsection</Heading>
    </div>
  );
}

Props

Prop	Type	Default	Description
level	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	2	Renders as `<h1>` through `<h6>`. Affects size and weight.
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Use `level` to set both semantic level and visual size at once.

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/heading.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 headingVariants = cva("font-semibold tracking-tight text-fg", {
  variants: {
    size: {
      "4xl": "text-4xl",
      "3xl": "text-3xl",
      "2xl": "text-2xl",
      xl: "text-xl",
      lg: "text-lg",
      md: "text-base",
    },
  },
  defaultVariants: { size: "2xl" },
});

export interface HeadingProps
  extends HTMLAttributes<HTMLHeadingElement>,
    VariantProps<typeof headingVariants> {
  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
}

export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
  ({ className, as: Tag = "h2", size, ...props }, ref) => (
    <Tag ref={ref} className={cn(headingVariants({ size }), className)} {...props} />
  ),
);
Heading.displayName = "Heading";

JavaFX

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

java

import design.prizm.fx.controls.PrizmHeading;

PrizmHeading()
PrizmHeading(String text)
PrizmHeading(String text, Size size)

Prop	Type	Default	Description
Size	`enum { XL4, XL3, XL2, XL, LG, MD }`	XL2	Visual size in px: 36 / 30 / 24 / 20 / 18 / 16. (No semantic tags in JavaFX.)

Thin Label subclass — semibold, tight tracking, via the .prizm-heading rules. Mirrors components/ui/heading.tsx.