clsx - OGify | Generate beautiful Open Graph images in minutes

clsx merges class names for use with the tw prop in JSX templates. It supports strings, arrays, objects, and conditional values — the same API surface as the popular clsx package.

Import

import { clsx } from "@ogify/core";

Function Signature

function clsx(...inputs: ClassValue[]): string;

type ClassValue =
  | string
  | number
  | bigint
  | boolean
  | null
  | undefined
  | ClassValue[]
  | Record<string, unknown>;

Examples

clsx("text-xl", "font-bold");
// → "text-xl font-bold"

clsx("base", isActive && "active", isDisabled && "opacity-50");
// → "base active" (when isActive is true, isDisabled is false)

clsx({
  "text-center": layout === "centered",
  "text-right": isRTL,
  "text-left": !isRTL && layout !== "centered",
});

clsx(["flex", "w-full"], isRTL ? "flex-row-reverse" : "flex-row");

<div
  tw={clsx(
    "w-full font-bold leading-[1.25] flex flex-wrap",
    subtitle ? "text-[56px]" : "text-[64px]",
    layout === "centered" ? "justify-center" : isRTL ? "justify-end" : "justify-start"
  )}
>
  {params.title}
</div>

clsx output is passed to the tw prop, which maps Tailwind-like utility classes to Satori-compatible inline styles. See Styles for supported utilities.

Type Definitions

​Import

​Function Signature

​Examples

Import

Function Signature

Examples