Composants
cn
Joins class names and resolves Tailwind conflicts: the last class wins.
Web uniquement — React, depuis @krizaka/ui/cn. Stable : son API ne change qu’à une version majeure.
Pourquoi il est là. Used by Orochia, Orazaka, krizaka.com.
Quand l’utiliser
- To build a
classNamefrom conditions in a product component. - To let a caller's
classNameoverride 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 @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@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.
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
classNamelast:cn(base, conditional, className). - One
cnper app: it shares the merge engine of the primitives.
Composants liés
Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub