Componentnavigation0.48 KB gzipZero dependencies

Jumbotron

Oversized scoreboard with pixel-style mono type, scanline sweep and scoreboard slots for home and away.

Preview

Live Preview

BIGBULL

Team ATeam B

42-38

Installation

Tokens guide →

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

npx bigbullui add jumbotron

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { Jumbotron } from "@/components/ui/jumbotron";

<Jumbotron title="BIGBULL CUP" home="BULLS" away="BEARS" score={[3, 2]} />

Usage guidance

Use Jumbotron when a ticket stub surface needs Oversized scoreboard with pixel-style mono type, scanline sweep and scoreboard slots for home and away. Keep props minimal and prefer composition with sibling stubs.

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

Source code

jumbotron.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 JumbotronProps {
  title?: string;
  home?: string;
  away?: string;
  score?: [number, number];
  className?: string;
}

export function Jumbotron({ title, home, away, score, className }: JumbotronProps) {
  const [homeScore, awayScore] = score || [0, 0];

  return (
    <div
      className={cn(
        "relative rounded-lg border border-border bg-card p-8 motion-reduce:transition-none",
        className
      )}
    >
      <div className="font-mono text-[24px] font-bold uppercase tracking-widest text-foreground mb-2">
        {title || "SCOREBOARD"}
      </div>

      <div className="flex justify-between text-muted-foreground text-[10px] uppercase tracking-wider mb-4">
        <span>{home}</span>
        <span>{away}</span>
      </div>

      {score && (
        <div className="font-mono text-[48px] font-bold text-foreground tracking-wider">
          {homeScore}-{awayScore}
        </div>
      )}
    </div>
  );
}

Props

Prop	Type	Description
title?	string
home?	string
away?	string
score?	[number, number]
className?	string