Headings are used to display titles and subtitles with semantic HTML heading elements.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
import Heading from "@radui/ui/Heading"

const HeadingExamples = () => (
    <div>
        <Heading>Heading 1</Heading>
        <Heading as="h2">Heading 2</Heading>
        <Heading as="h3">Heading 3</Heading>
        <Heading as="h4">Heading 4</Heading>
        <Heading as="h5">Heading 5</Heading>
        <Heading as="h6">Heading 6</Heading>
    </div>
)
  • Six different heading levels (h1-h6)
  • Each heading level has appropriate styling out of the box
  • Preserves semantic meaning with proper HTML tags
  • Customizable with className and style props

A component for displaying headings with different levels (h1-h6) and customizable styling.

PropTypeDefault

as

enum

h1

children

ReactNode--

className

string''

customRootClass

string''
Edit this page on GitHub