WebStableFondations

Web uniquement — React, depuis @krizaka/ui/cn. Stable : son API ne change qu’à une version majeure.

Quand l’utiliser

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

Quand ne pas l’utiliser

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

Installation

Installer

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

Styles

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

Importer

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

Exemples

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

Ce module n'a pas de props de composant : voir l'import et l'aperçu ci-dessus.

Accessibilité

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

Bonnes pratiques

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

Générée depuis le code de @krizaka/ui 2.0.0-beta.6 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

cn