cn + money

Class merge helper and currency formatter every StoreKit item uses.

lib
$npx shadcn@latest add @storekit/cn
cn
Demo pending

Live and interactive. Switch the brand in the frame header to see the same source under another token file.

Installation

$npx shadcn@latest add @storekit/cn
$pnpm dlx shadcn@latest add @storekit/cn
$yarn dlx shadcn@latest add @storekit/cn
$bunx --bun shadcn@latest add @storekit/cn

Source

components/storekit/lib/cn.ts
13 lines
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

/** Merge Tailwind classes safely. Every StoreKit component imports this. */
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

/** Format integer cents as USD. Swap the locale/currency for your store. */
export function money(cents: number, currency = "USD", locale = "en-US") {
  return new Intl.NumberFormat(locale, { style: "currency", currency }).format(cents / 100)
}

Usage

Import from "@/components/storekit/lib/cn" and pass your product data. The demo above exercises the full prop surface with sample values.

cn + money, StoreKit