Componentnavigation

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

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

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

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	Board title.
home	string	Home team label.
away	string	Away team label.
score	[number, number]	Home and away scores.
children	React.ReactNode	Extra scoreboard slots.