Product Badge
Commerce badges for sale, trending, new, and stock status.
NEWSALEOnly 3 leftPOPULARTRENDINGLIMITEDBEST SELLER
Installation
npx shadcn@latest add @gameone/product-badgeRegistry dependencies: gameone-utils, fontawesome-kit
Usage
import { ProductBadge } from "@/components/ui/product-badge"<ProductBadge type="new" />Examples
New
NEW
import { ProductBadge } from "@/components/ui/product-badge"
export function ProductBadgeNew() {
return <ProductBadge type="new" />
}Sale
SALE
import { ProductBadge } from "@/components/ui/product-badge"
export function ProductBadgeSale() {
return <ProductBadge type="sale" />
}Low Stock
Only 3 left
import { ProductBadge } from "@/components/ui/product-badge"
export function ProductBadgeLowStock() {
return <ProductBadge type="low-stock" stock={3} />
}Popular
POPULAR
import { ProductBadge } from "@/components/ui/product-badge"
export function ProductBadgePopular() {
return <ProductBadge type="popular" />
}Trending
TRENDING
import { ProductBadge } from "@/components/ui/product-badge"
export function ProductBadgeTrending() {
return <ProductBadge type="trending" />
}Limited
LIMITED
import { ProductBadge } from "@/components/ui/product-badge"
export function ProductBadgeLimited() {
return <ProductBadge type="limited" />
}Best Seller
BEST SELLER
import { ProductBadge } from "@/components/ui/product-badge"
export function ProductBadgeBestSeller() {
return <ProductBadge type="best-seller" />
}