Componentticket-stub0.6 KB gzipZero dependencies

Seasonal Pumpkin

Autumn harvest greeting card.

Preview

Live Preview

Autumn series

Harvest Nights

Cider, lanterns and late shows.

Installation

Tokens guide →

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

npx bigbullui add seasonal-pumpkin

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { SeasonalPumpkin } from "@/components/ui/seasonal-pumpkin";

<SeasonalPumpkin />

Usage guidance

Use Seasonal Pumpkin when a ticket stub surface needs Autumn harvest greeting card. Keep props minimal and prefer composition with sibling stubs.

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

Source code

seasonal-pumpkin.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 SeasonalPumpkinProps extends React.HTMLAttributes<HTMLDivElement> {
  title?: string;
}

/** Seasonal pumpkin: autumn greeting card with harvest badge. */
export function SeasonalPumpkin({ title = "Harvest Nights", className, children, ...props }: SeasonalPumpkinProps) {
  return (
    <div className={cn("w-full max-w-sm rounded-lg border-2 border-foreground bg-card p-6 text-center", className)} {...props}>
      <div aria-hidden="true" className="mx-auto flex size-12 items-center justify-center rounded-full border-2 border-dashed border-accent bg-accent/10 text-xl transition-transform duration-300 hover:scale-110 motion-reduce:transition-none">
        <span aria-hidden="true">◉</span>
      </div>
      <p className="mt-3 font-mono text-[10px] uppercase tracking-widest text-accent">Autumn series</p>
      <h3 className="mt-1 text-lg font-black">{title}</h3>
      <div className="mt-2 text-sm text-muted-foreground">{children ?? <p>Cider, lanterns and late shows.</p>}</div>
    </div>
  );
}