Usage
Use cn for variants, active states, tone props, and layout flags.
- ALWAYS import cn from @quan-erp/shared-ui
- Do NOT use template-literal className concatenation
- Do NOT import clsx, tailwind-merge, or cn from other packages
TSXcn
1import { cn } from "@quan-erp/shared-ui";
2
3<div
4 className={cn(
5 "inline-flex items-center rounded-full border border-border p-0.5",
6 tone === "on-dark" ? "border-white/15 bg-white/10" : "bg-muted",
7 )}
8/>
9
10<button
11 className={cn(
12 "flex h-8 w-8 items-center justify-center rounded-full transition",
13 active && "bg-background text-foreground",
14 !active && "text-muted-foreground hover:text-foreground",
15 )}
16/>Incorrect
TSXincorrect
// Do not do this
className={`inline-flex border p-0.5 ${tone === "on-dark" ? "bg-white/10" : "bg-muted"}`}