Heading
Heading component is used to render semantic headings (h1-h6) with various styles, sizes, weights, and colors. It automatically applies appropriate styling based on the heading level.
import { Heading } from "@ninna-ui/primitives"pnpm add @ninna-ui/primitivesRequires @ninna-ui/core (auto-installed) + CSS setup.
Usage
Import and use the Heading component to render semantic headings.
import { Heading } from "@ninna-ui/primitives";
export default function Example() { return ( <Heading as="h1">Page Title</Heading> );}Basic
Default heading rendering with automatic styling based on level.
This is an h1 heading
This is an h2 heading
This is an h3 heading
Heading Levels
All six heading levels (h1-h6) with their default styles.
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Sizes
Override the default size with the size prop.
Override default sizes with the size prop
Size 6xl
Size 5xl
Size 4xl
Size 3xl
Size 2xl
Size xl
Size lg
Weights
Different font weights from light to bold.
Light weight heading
Normal weight heading
Medium weight heading
Semibold weight heading (default)
Bold weight heading
Colors
Headings with different color variants.
Neutral color heading
Primary color heading
Secondary color heading
Accent color heading
Info color heading
Success color heading
Warning color heading
Danger color heading
Alignment
Text alignment options: left, center, and right.
Left aligned heading
Center aligned heading
Right aligned heading
Truncation
Truncate headings with ellipsis or limit to specific number of lines.
Single line truncate
This is a very long heading that will be truncated when it exceeds the container width to demonstrate the truncate functionality
Line clamp (2 lines)
This is a very long heading that will be truncated when it exceeds the container width to demonstrate the truncate functionality This is a very long heading that will be truncated when it exceeds the container width to demonstrate the truncate functionality
No wrap
This is a very long heading that will be truncated when it exceeds the container width to demonstrate the truncate functionality
Use Cases
Real-world examples of Heading component usage.
Welcome to Ninna UI
A modern, accessible component library for building beautiful interfaces.
Getting Started
Learn how to install and configure Ninna UI in your project.
Installation
Install the package using npm or yarn.
Configuration
Configure Tailwind CSS to work with Ninna UI.
Card Title
Card subtitle or description
Fast
Optimized for performance
Accessible
WCAG 2.1 compliant
Flexible
Highly customizable
Build Faster
Ship beautiful products with confidence
✓ Operation Successful
✗ Error Occurred
⚠ Warning: Action Required
ℹ Information Notice
API Reference
Complete list of props for the Heading component.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h2' | The heading level - determines the semantic HTML element |
size | 'xs' | 'sm' | 'md' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | - | Override the default size for the heading level |
weight | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | - | Font weight override |
color | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'neutral' | Text color |
align | 'left' | 'center' | 'right' | - | Text alignment |
truncate | boolean | false | Whether to truncate text with ellipsis |
lineClamp | 1 | 2 | 3 | 4 | 5 | 6 | - | Maximum number of lines before truncating |
noWrap | boolean | false | Whether text should not wrap |
className | string | - | Additional CSS classes |
Accessibility
- Semantic HTML: Always use the appropriate heading level (h1-h6) for document structure
- Heading hierarchy: Maintain proper heading order (h1 → h2 → h3) without skipping levels
- Single h1: Each page should have only one h1 element
- Color contrast: All color variants meet WCAG AA contrast requirements
- Screen readers: Headings help screen reader users navigate the page structure
- Size vs Level: Use the 'as' prop for semantic level and 'size' prop for visual styling