Componentnavigation0.59 KB gzipZero dependencies

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

Open in StackBlitz

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

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

Usage guidance

Use Section Heading when a ticket stub surface needs Theater and arena section divider banner with dashed rules and zone badges. Keep props minimal and prefer composition with sibling stubs.

Avoid Section Heading for long form flows or dense data grids where a dedicated layout block fits better.

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 ps-4.5">
          {subtitle}
        </p>
      )}
    </div>
  );
}

Props

Prop	Type	Description
title	string
subtitle?	string
badge?	string
action?	React.ReactNode
className?	string