WebStableFoundations

Web only — React, from @krizaka/ui/cn. Stable: its API only changes in a major version.

When to use

To build a className from conditions in a product component.
To let a caller's className override a component's classes.

When not to use

To define the variants of a component: use tv() from tailwind-variants, like the primitives.
To pass props and classes to a child element.Use instead: Slot

Installation

Install

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { cn } from "@krizaka/ui/cn";

Examples

Merge

The last class wins: px-4 replaces px-3, the selected colours replace the idle ones.

The last class wins: px-4 replaces px-3, and the selected colours replace the idle ones.

import { cn } from "@krizaka/ui/cn";

export default function CnMerge({ selected = true }: { selected?: boolean }) {
  return (
    <p className={cn("rounded-lg border border-border-default px-3 py-2 text-sm text-fg-secondary", selected && "border-accent text-fg", "px-4")}>
      The last class wins: <code>px-4</code> replaces <code>px-3</code>, and the selected colours replace the idle ones.
    </p>
  );
}

Props

This module has no component props: see the import and the preview above.

Accessibility

No effect on accessibility: it only computes a class string.

Best practices

Put the caller's className last: cn(base, conditional, className).
One cn per app: it shares the merge engine of the primitives.

Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub

cn