Skip to Content
Dashflow Logo

H1 Component

A comprehensive guide to using the H1 component with examples, props, and best practices.

Overview

The H1 component provides a styled heading element for the main title of your page or section. It's designed to be visually prominent and accessible, following typography best practices.

Basic Usage

import { H1 } from '@dashflowx/core'


export default function H1Example() {
  return (
    <H1>Welcome to Our Platform</H1>
  )
}

Preview:

Heading 6

Props

PropTypeDefaultDescription
classNamestring''Additional CSS classes for the heading
childrenReactNode-The heading text content

Examples

Basic Heading

import { H1 } from '@dashflowx/core'


export default function BasicH1() {
  return (
    <H1>Main Page Title</H1>
  )
}

Preview:

Main Page Title

Styled Heading

import { H1 } from '@dashflowx/core'


export default function StyledH1() {
  return (
    <H1 className="text-blue-600 text-center">
      Welcome to Our Service
    </H1>
  )
}

Preview:

Welcome to Our Service

Gradient Heading

import { H1 } from '@dashflowx/core'


export default function GradientH1() {
  return (
    <H1 className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
      Amazing Features
    </H1>
  )
}

Preview:

Amazing Features

Centered Heading

import { H1 } from '@dashflowx/core'


export default function CenteredH1() {
  return (
    <H1 className="text-center mb-8">
      Get Started Today
    </H1>
  )
}

Preview:

Get Started Today

Custom Styled Heading

import { H1 } from '@dashflowx/core'


export default function CustomH1() {
  return (
    <H1 className="text-5xl font-extrabold text-gray-800 border-b-4 border-blue-500 pb-4">
      Premium Quality
    </H1>
  )
}

Preview:

Premium Quality

Common Use Cases

Page Title

const pageTitle = (
  <H1 className="text-center mb-8">
    Welcome to Our Platform
  </H1>
);

Section Header

const sectionHeader = (
  <H1 className="mb-6">
    Our Services
  </H1>
);

Hero Title

const heroTitle = (
  <H1 className="text-6xl font-bold text-white text-center mb-8">
    Transform Your Business
  </H1>
);

Product Title

const productTitle = (
  <H1 className="text-3xl font-semibold text-gray-900">
    Premium Product Name
  </H1>
);

Best Practices

1. Single H1 Per Page

Use only one H1 per page for proper SEO and accessibility.

// ✅ Good - Single H1 per page
<H1>Main Page Title</H1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>


// ❌ Avoid - Multiple H1s
<H1>First Title</H1>
<H1>Second Title</H1>

2. Descriptive Content

Use descriptive and meaningful text for your headings.

// ✅ Good - Descriptive
<H1>Complete Guide to React Development</H1>


// ❌ Avoid - Generic
<H1>Guide</H1>

3. Proper Hierarchy

Maintain proper heading hierarchy with H1 as the top level.

// ✅ Good - Proper hierarchy
<H1>Main Title</H1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>


// ❌ Avoid - Skipping levels
<H1>Main Title</H1>
<h3>Subsection Title</h3>

4. Accessible Text

Ensure your heading text is accessible and readable.

// ✅ Good - Clear and accessible
<H1>Welcome to Our Online Store</H1>


// ❌ Avoid - Unclear or too long
<H1>Welcome to our amazing, fantastic, incredible, wonderful online store where you can find everything you need</H1>

5. Consistent Styling

Use consistent styling across your application.

// ✅ Good - Consistent styling
<H1 className="text-4xl font-bold text-gray-900 mb-6">
  Page Title
</H1>


// ❌ Avoid - Inconsistent styling
<H1 className="text-2xl font-normal text-blue-500 mb-2">
  Page Title
</H1>

Customization

Custom Styling

You can customize the H1 appearance using CSS classes:

<H1 className="text-5xl font-extrabold text-purple-600">
  Custom Styled Title
</H1>

Different Themes

Use different themes for different contexts:

// Light theme
<H1 className="text-gray-900">Light Theme Title</H1>


// Dark theme
<H1 className="text-white">Dark Theme Title</H1>


// Brand theme
<H1 className="text-blue-600">Brand Theme Title</H1>

Size Variations

Use different sizes for different emphasis levels:

// Small H1
<H1 className="text-2xl">Small Title</H1>


// Standard H1
<H1 className="text-4xl">Standard Title</H1>


// Large H1
<H1 className="text-6xl">Large Title</H1>

Advanced Usage

Dynamic Content

Use dynamic content in your headings:

const [pageTitle, setPageTitle] = useState('Welcome');


<H1>{pageTitle}</H1>

Conditional Styling

Apply conditional styling based on state:

const [isActive, setIsActive] = useState(false);


<H1 className={`${isActive ? 'text-blue-600' : 'text-gray-900'}`}>
  Dynamic Title
</H1>

Internationalization

Support multiple languages:

const { t } = useTranslation();


<H1>{t('page.title')}</H1>
  • H2: For section headings
  • H3: For subsection headings
  • H4: For sub-subsection headings
  • H5: For minor headings
  • H6: For smallest headings
  • Typography: For general text styling

API Reference

For the complete API reference and advanced usage patterns, see the H1 API documentation.

Edit this page on GitHub
previousCode