cn

PreviousNext

API reference for @udecode/cn.

@udecode/cn contains utility functions for React & Tailwind.

cn

Conditionally add Tailwind CSS classes without conflicts.

Parameters

  • ...inputs CxOptions

    Class values set using clsx and tailwind-merge.

Returnsstring

    The combined className.

withCn

Set default className to a component.

Parameters

Collapse all

  • Component React.ComponentType

    The component to which props will be added.

  • ...inputs CxOptions

    The default className to set using cn.

ReturnsReact.ComponentType

    A new component that includes the default className.

withProps

Set default props to a component.

Parameters

Collapse all

  • Component React.ComponentType | ElementType

    The component to which props will be added.

  • props Partial<T>

    The props to be added to the component.

ReturnsReact.ComponentType

    A new component that includes the default props.

withVariants

Set default className to a component using variants from class-variance-authority.

Parameters

Collapse all

  • Component React.ComponentType | ElementType

    The component to which props will be added.

  • variants V extends ReturnType<typeof cva>

    The variants as the default className.

  • onlyVariantsProps (keyof VariantProps<V>)[]

    The props to exclude from Component. Set the props that are only used for variants.

ReturnsReact.ComponentType

    A new component that includes the default className.

cnPlate 核心