Componentfeedback0.65 KB gzipZero dependencies

Stock Status

Stock status badge: in stock, low stock pulse, sold out.

Preview

Live Preview

Only 3 leftIn stock · 50

Installation

Tokens guide →

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

npx bigbullui add stock-status

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { StockStatus } from "@/components/ui/stock-status";

<StockStatus />

Usage guidance

Use Stock Status when a ticket stub surface needs Stock status badge: in stock, low stock pulse, sold out. Keep props minimal and prefer composition with sibling stubs.

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

Source code

stock-status.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 StockStatusProps extends React.HTMLAttributes<HTMLSpanElement> {
  /** mevcut stok */
  stock: number;
  /** Low stock warning threshold */
  lowAt?: number;
  labelInStock?: string;
}

/** Stock availability indicator: in-stock / low / out of stock + pulse. */
export function StockStatus({ stock, lowAt = 5, labelInStock = "In stock", className, ...props }: StockStatusProps) {
  const out = stock <= 0;
  const low = stock > 0 && stock <= lowAt;

  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 font-mono text-[10px] uppercase tracking-wider",
        out ? "border-destructive/50 bg-destructive/10 text-destructive" : low ? "border-warning/50 bg-warning/10 text-warning" : "border-success/50 bg-success/10 text-success",
        className
      )}
      role="status"
      {...props}
    >
      <span
        className={cn(
          "size-1.5 rounded-full bg-current",
          !out && (low ? "animate-pulse motion-reduce:animate-none" : "animate-pulse motion-reduce:animate-none")
        )}
        aria-hidden="true"
      />
      {out ? "Out of Stock" : low ? `Only ${stock} left` : `${labelInStock} · ${stock}`}
    </span>
  );
}

Props

Prop	Type	Description
stock	number	mevcut stok
lowAt	number	Threshold for low stock warning
labelInStock	string