Skip to main content

​
Overview

The Title component renders semantic HTML heading elements (h1 through h6) with appropriate styling based on the heading level. It supports size overrides to decouple visual appearance from semantic structure.

​
Import

import { Title } from '@kivora/react';

​
Basic Usage

<Title>Default Heading (h2)</Title>

​
Heading Levels

Control the semantic heading level with the order prop: 
<Title order={1}>Page Title (h1)</Title>
<Title order={2}>Section Title (h2)</Title>
<Title order={3}>Subsection (h3)</Title>
<Title order={4}>Minor Heading (h4)</Title>
<Title order={5}>Subheading (h5)</Title>
<Title order={6}>Small Heading (h6)</Title>

​
Default Styling by Order

OrderElementDefault Style
1h1text-4xl font-extrabold tracking-tight
2h2text-3xl font-bold tracking-tight
3h3text-2xl font-bold
4h4text-xl font-semibold
5h5text-lg font-semibold
6h6text-base font-semibold

​
Size Override

Override the default size while maintaining semantic structure: 
<Title order={3} size="xl">Large h3 heading</Title>
<Title order={1} size="md">Smaller h1 for visual hierarchy</Title>

​
Available Sizes

SizeStyle
xstext-sm font-semibold
smtext-base font-semibold
mdtext-xl font-semibold
lgtext-2xl font-bold
xltext-3xl font-bold
2xltext-4xl font-extrabold tracking-tight
3xltext-5xl font-extrabold tracking-tight
4xltext-6xl font-extrabold tracking-tight

​
Examples

​
Page Header

<Title order={1}>Welcome to Kivora</Title>

​
Section with Visual Override

<Title order={2} size="xl">Features</Title>

​
Semantic Structure

Maintain proper heading hierarchy while controlling visual size: 
<article>
  <Title order={1}>Article Title</Title>
  <Title order={2}>Introduction</Title>
  <Title order={3} size="md">Background</Title>
  <Title order={2}>Main Content</Title>
  <Title order={3}>First Topic</Title>
</article>

​
Extra Large Display

<Title order={1} size="4xl">Hero Heading</Title>

​
Props

​
order
1 | 2 | 3 | 4 | 5 | 6
default:"2"
Semantic heading level (generates h1-h6 element)
​
size
'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'
Override the default size for the heading level
​
className
string
Additional CSS classes
​
children
ReactNode
Heading content
​
...props
React.ComponentPropsWithoutRef<'h1'>
All standard HTML heading element props (id, aria-*, etc.)

​
Type Definition

Source: /home/daytona/workspace/source/src/components/typography/Title.tsx:6 
export interface TitleProps extends React.ComponentPropsWithoutRef<'h1'> {
  order?: 1 | 2 | 3 | 4 | 5 | 6;
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
}

Build docs developers (and LLMs) love

Get started for freeTalk to us