@olundot/ui · Reference

cn

조건부 className을 합치고 OLUN typography utility 충돌을 안전하게 병합하는 class composition helper입니다.

clsx
조건부 class, 배열, 객체 입력을 문자열로 합칩니다.
tailwind-merge
중복 utility 충돌을 마지막 값 기준으로 정리합니다.
font-size group
text-body-sm 같은 OLUN typography utility가 text color와 충돌하지 않도록 확장되어 있습니다.

조건부 class 병합

clsx + tailwind-merge
병합된 className
코드 보기tsx
import { cn } from "@olundot/ui";

const className = cn(
  "text-body-sm text-text-secondary",
  isActive && "text-foreground",
  "text-body-lg",
);

컴포넌트 확장

consumer className

호출부 className이 edge를 덮어씁니다.

코드 보기tsx
import { cn } from "@olundot/ui";

export function Panel({ className }: { className?: string }) {
  return <div className={cn("rounded-[var(--radius-md)] border border-[var(--border-subtle)]", className)} />;
}