Section Header

Eyebrow badge, headline, and description to anchor content sections.

Preview

Content

Make each section feel intentional.

Use this header to anchor content blocks with bold hierarchy.

Installation

terminal

Other package managers

bunx --bun shadcn@latest add https://trents.tech/r/section-header.json

Usage

section-header-demo.tsx

import SectionHeader from "@/components/blocks/section-header"

export default function SectionHeaderDemo() {
  return (
    <SectionHeader
      // Swap headline copy and alignment as needed.
      eyebrow="Content"
      title="Make each section feel intentional."
      description="Use this header to anchor content blocks with bold hierarchy."
      align="left"
    />
  )
}