From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
  • Plate
  • Plitev42
    • Editor API
    • Editor Transforms
    • Node
    • Element
    • Text
    • Path
    • Point
    • Range
    • Location
    • Location Ref
    • Document Change
  • Plate Core
    • Plate Components
    • Plate Editor
    • Plate Plugin
    • Plate Store
    • Plate Controller
  • Plate Utils
  • React Utils
  • cn
  • Floating
  • Resizable

cn

PreviousNext

API reference for @udecode/cn.

@udecode/cn exports one class-name helper and re-exports @udecode/react-utils.

Installation

pnpm add @udecode/cn
pnpm add @udecode/cn

Usage

import { cn } from '@udecode/cn';
 
export function Button({
  active,
  className,
  ...props
}: React.ComponentProps<'button'> & { active?: boolean }) {
  return (
    <button
      className={cn(
        'inline-flex rounded-md px-3 py-2',
        active && 'bg-accent',
        className
      )}
      {...props}
    />
  );
}

Write concrete components directly. Keep defaults, variants, and React 19 ref props visible in their owning component instead of wrapping it in a component factory.

API

Parameters

    Conditional class values accepted by class-variance-authority's cx.

Returnsstring

    Classes merged by cx and normalized with tailwind-merge.

Related APIs

  • React Utils covers the React utilities re-exported from this package.
React UtilsFloating

On This Page

InstallationUsageAPIRelated APIs
Build your editor
Production-ready AI template and reusable components.
Get all-access
import { cn } from '@udecode/cn';
 
export function Button({
  active,
  className,
  ...props
}: React.ComponentProps<'button'> & { active?: boolean }) {
  return (
    <button
      className={cn(
        'inline-flex rounded-md px-3 py-2',
        active && 'bg-accent',
        className
      )}
      {...props}
    />
  );
}