Heading
A text element used for section titles with various importance levels.
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Automatic Installation
This method is still working on progress, please use manual installation for now.
Manual Installation
Install dependencies
npm install radix-uiCopy the code
import { Slot } from 'radix-ui'
import * as React from 'react'
import { type HeadingStyles, headingStyles } from './heading.css'
interface HeadingProps extends React.ComponentPropsWithoutRef<'h2'>, HeadingStyles {
asChild?: boolean
}
const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
({ className, level = 'h2', weight, align, asChild = false, ...props }, forwardedRef) => {
const Comp = asChild ? Slot.Root : level
return (
<Comp
ref={forwardedRef}
className={headingStyles({ level, weight, align, className })}
{...props}
/>
)
}
)
Heading.displayName = 'Heading'
export { Heading }Usage
Imports
import { Heading } from '#/components/heading'Example
Browse the Storybook for more examples.
Edit on GitHub
Last updated on 3/24/2025