Components
Loading preview...
HeroUI v3 Typography — heading and body type scale, primitives (Heading/Paragraph/Code), Prose for rich text, and the render-prop polymorphic API.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-typography"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