Component

Section Head

A marketing section heading cluster — small-caps kicker, h2 title, and optional lede paragraph — with center or left alignment. Drop it at the top of any landing page section.

Centered

The default alignment. Kicker, title, and container are centered and constrained to a readable max-width.

Why refraction

Build beautiful UIs faster

Left-aligned

Pass align="left" for flush-left sections, common in feature lists and split layouts.

Features

Everything you need

With lede

Add a lede prop to render a supporting paragraph below the title.

Open source

Designed for teams

A comprehensive component library that grows with your product. Accessible, themeable, and framework-agnostic by design.

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { SectionHead } from '@refraction-ui/react'

export function HeroSection() {
  return (
    <SectionHead
      kicker="Why refraction"
      title="Build beautiful UIs faster"
      lede="A comprehensive component library that grows with your product."
      align="center"
    />
  )
}

Props

Prop	Type	Default	Description
`title`	`React.ReactNode`	--	Primary heading content (required).
`kicker`	`React.ReactNode`	--	Optional small-caps eyebrow rendered above the title.
`lede`	`React.ReactNode`	--	Optional lede paragraph rendered below the title.
`align`	`'center' \| 'left'`	`'center'`	Horizontal alignment of the kicker, title, and lede.
`as`	`'h1' \| 'h2' \| 'h3'`	`'h2'`	Override the heading element rendered for the title.
`className`	`string`	--	Additional CSS classes to apply to the wrapper.