HeroUI Typography

HeroUI v3 Typography — heading and body type scale, primitives (Heading/Paragraph/Code), Prose for rich text, and the render-prop polymorphic API.

by Hero Ui

"use client"

import { Typography } from "@/components/ui/heroui-typography"

export const RenderProps = () => {
  return (
    <div className="flex max-w-xl flex-col gap-4">
      <Typography render={({ children, ...domProps }) => <h2 {...domProps}>{children}</h2>} type="h1">
        H1 visual style, h2 semantic element
      </Typography>
      <Typography render={({ children, ...domProps }) => <span {...domProps}>{children}</span>}>
        The render prop can swap the underlying element while preserving HeroUI props and styles.
      </Typography>
    </div>
  )
}

export default RenderProps