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-typographyimport { Typography } from "@/components/ui/heroui-typography"
export const Primitives = () => {
return (
<div className="flex max-w-xl flex-col gap-4">
<Typography.Heading level={1}>Dashboard</Typography.Heading>
<Typography.Paragraph>
Convenience primitives are thin wrappers over Typography, so you can choose explicit
composition without learning a second styling system.
</Typography.Paragraph>
<Typography.Paragraph color="muted" size="sm">
Paragraph supports base, sm, and xs sizes.
</Typography.Paragraph>
<Typography.Code>Typography.Code</Typography.Code>
</div>
)
}
export default Primitives