Componentnavigation

Section Heading

Theater and arena section divider banner with dashed rules and zone badges.

Preview

Live Preview

SECTION A · ORCHESTRA

GATE 03

VIEW MAP →

GROUND LEVEL · DIRECT STAGE VIEW

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add section-heading

Or install the full npm package:

npm install bigbullui

Usage

import { SectionHeading } from "@/components/ui/section-heading";

<SectionHeading title="ORCHESTRA TIER" subtitle="DOORS OPEN 19:30" badge="GATE 03" />

Source code

section-heading.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface SectionHeadingProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string;
  subtitle?: string;
  badge?: string;
  action?: React.ReactNode;
  className?: string;
}

export function SectionHeading({
  title,
  subtitle,
  badge,
  action,
  className,
  ...props
}: SectionHeadingProps) {
  return (
    <div
      className={cn(
        "flex w-full flex-col gap-1.5 border-b-2 border-dashed border-border pb-3 font-mono select-none",
        className
      )}
      {...props}
    >
      <div className="flex items-center justify-between gap-4">
        <div className="flex items-center gap-2.5">
          <div className="size-2 rounded-full bg-accent animate-ping" />
          <h3 className="text-sm font-bold uppercase tracking-[0.15em] text-foreground">
            {title}
          </h3>
          {badge && (
            <span className="rounded-xs border border-accent bg-accent/10 px-1.5 py-0.5 text-[9px] font-bold uppercase text-accent">
              {badge}
            </span>
          )}
        </div>

        {action && <div className="shrink-0">{action}</div>}
      </div>

      {subtitle && (
        <p className="text-[11px] text-muted-foreground uppercase tracking-wider pl-4.5">
          {subtitle}
        </p>
      )}
    </div>
  );
}

Props

Prop	Type	Description
title	string	Main section heading title (required).
subtitle	string	Optional secondary description line.
badge	string	Optional badge text (e.g. 'GATE 3').
action	React.ReactNode	Optional right-aligned action slot.