Recipes

Copy-paste compositions of bigbullui components for checkout, auth, and dashboards.

Checkout flow

Cart summary, coupon validation, and a sticky claim bar for ticket checkout.

import { CheckoutSummary } from "@/components/ui/checkout-summary";
import { CouponField } from "@/components/ui/coupon-field";
import { StickyBar } from "@/components/ui/sticky-bar";

export function Checkout() {
  return (
    <>
      <CheckoutSummary />
      <CouponField onApply={(code) => console.log(code)} />
      <StickyBar itemCount={2} total="$90.00" actionText="ADMIT NOW" />
    </>
  );
}

Checkout Summary →Coupon Field →Sticky Bar →

Auth gate

import { LoginForm } from "@/components/ui/login-form";
import { OtpVerify } from "@/components/ui/otp-verify";
import { TwoFactor } from "@/components/ui/two-factor";

export function AuthGate() {
  return (
    <>
      <LoginForm onSubmit={(v) => console.log(v)} />
      <OtpVerify onVerify={(code) => console.log(code)} />
      <TwoFactor />
    </>
  );
}

Ops dashboard

KPI strip, trend chart, and live activity feed for nightly venue operations.

import { KpiStrip } from "@/components/ui/kpi-strip";
import { LineChart } from "@/components/ui/line-chart";
import { ActivityFeed } from "@/components/ui/activity-feed";

export function OpsDashboard() {
  return (
    <>
      <KpiStrip tiles={[{ label: "ADMITTED", value: "4,820" }]} />
      <LineChart series={[{ label: "Scans", data: [10, 22, 18, 30] }]} />
      <ActivityFeed />
    </>
  );
}

KPI Strip →Line Chart →Activity Feed →

Compare metric components

Feature	Stat Tile	KPI Strip
Scope	Single metric	Four tiles
Motion	Tilt on hover	Static grid
Trend	Spark bars	Spark bars
Best for	Data pages	Dashboards

Use Stat Tile for a hero number, Kpi Strip for the full nightly summary.