cn

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

cn

Conditionally add Tailwind CSS classes without conflicts.

<API name="cn"> <APIParameters> <APIItem name="...inputs" type="CxOptions"> Class values set using `clsx` and `tailwind-merge`. </APIItem> </APIParameters> <APIReturns type="string"> The combined className. </APIReturns> </API>

withCn

Set default className to a component.

<API name="withCn"> <APIParameters> <APIItem name="Component" type="React.ComponentType"> The component to which props will be added. </APIItem> <APIItem name="...inputs" type="CxOptions"> The default `className` to set using `cn`. </APIItem> </APIParameters> <APIReturns type="React.ComponentType"> A new component that includes the default `className`. </APIReturns> </API>

withProps

Set default props to a component.

<API name="withProps"> <APIParameters> <APIItem name="Component" type="React.ComponentType | ElementType"> The component to which props will be added. </APIItem> <APIItem name="props" type="Partial<T>"> The props to be added to the component. </APIItem> </APIParameters> <APIReturns type="React.ComponentType"> A new component that includes the default props. </APIReturns> </API>

withVariants

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

<API name="withVariants"> <APIParameters> <APIItem name="Component" type="React.ComponentType | ElementType"> The component to which props will be added. </APIItem> <APIItem name="variants" type="V extends ReturnType<typeof cva>"> The variants as the default `className`. </APIItem> <APIItem name="onlyVariantsProps" type="(keyof VariantProps<V>)[]"> The props to exclude from `Component`. Set the props that are only used for variants. </APIItem> </APIParameters> <APIReturns type="React.ComponentType"> A new component that includes the default `className`. </APIReturns> </API>