Title

A flexible and accessible title component that supports different heading levels, styling options, and content structure.

The Title component is a highly customizable heading component that ensures accessibility and SEO best practices while providing flexible styling options.

Installation

npx pixelblock-cli add Title

This will copy the Title.tsx file to your project's components/PixelBlock directory.

your-project/
├── components/
│   └── PixelBlock/
│       └── Title.tsx
└── ...

Usage

After installing the Title component, you can use it in your React application.

Basic Example

Font Weights

Custom Element Types

Custom Font Size and Content

Props

Prop	Type	Default	Description
title	ReactNode	-	The main title content (supports strings and JSX)
content	string	-	Optional supporting content below the title
className	string	""	Additional CSS classes to apply to the wrapper
as	ElementType	"h2"	HTML element or component to render the title as
fontSize	string	"lg:text-[2.85rem] text-3xl"	Custom font size using Tailwind classes
fontWeight	"sm" | "md" | "lg" | "xl"	"lg"	Predefined font weight options
ariaLevel	number	-	Sets aria-level for non-heading elements

Accessibility Features

• Automatically handles role="heading" and aria-level attributes
• Provides development warnings for SEO and accessibility best practices
• Supports ARIA live regions for dynamic content updates
• Maintains heading hierarchy with proper HTML elements

Development Considerations

1. The component includes development warnings for:

   • Usage of <h1> tags to ensure proper page structure
   • Non-heading tags with aria-level attributes

2. Color handling:

   • Automatically detects text color based on className
   • Supports dark mode through Tailwind classes

3. Responsive design:

   • Uses different font sizes for mobile and desktop
   • Maintains proper line height across screen sizes