Headings scattered across your app drift in size, weight, and dark-mode behavior — h2 is 24px in one place, lg on the next page, and breaks contrast in dark mode without explicit overrides. Redoing Tailwind tokens for every section wastes time and splits the visual language.

Heading is a polymorphic Tailwind v4 element that renders h1 through h6 via the as prop, with six built-in sizes (xs through 2xl) and four weights (normal, medium, semibold, bold). Zinc text colors and dark-mode inverses are applied by default. Escape hatches: pass className for overrides or any standard HTML heading attribute.

Import from @particle-academy/react-fancy and drop in <Heading as="h1" size="2xl" weight="bold"> — or just <Heading> to get h2, lg, bold by default. The component forwards refs and carries a data-react-fancy-heading attribute for stable selection.