Under Construction

We're actively working on new components and features. Stay tuned! Head over to our GitHub to see what's coming next.

Let’s build together on our Discord.

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
React
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