Components
cn
Joins class names and resolves Tailwind conflicts: the last class wins.
Web only — React, from @krizaka/ui/cn. Stable: its API only changes in a major version.
Why it is here. Used by Orochia, Orazaka, krizaka.com.
When to use
- To build a
classNamefrom conditions in a product component. - To let a caller's
classNameoverride 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 @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@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.
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
classNamelast:cn(base, conditional, className). - One
cnper app: it shares the merge engine of the primitives.
Related components
Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub