classNames

import { classNames } from "reshaped";

Similar to the classnames library, this utility allows you to combine multiple class names into a single string without installing an additional package. You can use it for building your own components which needs to conditionally apply class names based on props or state.

import { classNames } from "reshaped";
import styles from "./Button.module.css";

const buttonClass = classNames(
  styles.root,
  style.variant && styles[`--variant-${styles.variant}`],
  disabled && styles.disabled,
);

Note that all Reshaped components with className property already use this utility internally, so you can pass multiple class names to them without any issues.

(...args: Array<string | undefined | null | boolean>): string;
Professionally crafted React & Figma components for building beautiful products or starting your own design system
Built with Reshaped in Amsterdam ❤️
Contact us·License agreement·FAQ·
© Reshaped 2025