Heading

A semantic heading component that renders the appropriate HTML heading level with consistent typography and styling.

Example

level
Usage

Installation

Install following dependencies:

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

Add cn helper using clsx and twMerge for conditional class merging in Tailwind components.

lib/utils.ts

Copy and paste the following code into your project.

components/ui/core/heading.tsx
npx @libravelui@latest add heading

Anatomy

import { Heading } from "@/components/ui/core/heading";
<Heading size={1}>Sphinx of black quartz, judge my vow.</Heading>
<Heading size={2}>Sphinx of black quartz, judge my vow.</Heading>
<Heading size={3}>Sphinx of black quartz, judge my vow.</Heading>
<Heading size={4}>Sphinx of black quartz, judge my vow.</Heading>

Props

Loading types…