cn()
Combine multiple class names into a single string.
Utilities
Helpful Utility Functions
SHIVMS UI includes reusable utility functions that simplify common development tasks, reduce duplicate code and improve developer productivity.
Example
import {
cn,
} from "@shivms/ui";
const classes = cn(
"button",
active && "active"
);Available Utilities
Common helper functions available throughout SHIVMS UI.
getClass()
Retrieve mapped CSS module class names.
getClasses()
Merge multiple CSS module class names.
mergeProps()
Safely merge React component props.
Basic Usage
Import the required utility and use it inside your application.
import {
cn,
} from "@shivms/ui";
export default function App() {
return (
<button
className={cn(
"button",
"primary"
)}
>
Click Me
</button>
);
}Why Use Utilities?
01
Cleaner Code
Reduce repeated logic with reusable helper functions.
02
Better Productivity
Build components faster with shared utilities.
03
Easy Maintenance
Keep your codebase consistent and easier to maintain.
Continue Reading
Explore more SHIVMS UI documentation and guides.
Learn what SHIVMS UI is and how to begin.
Install the library into your project.
Reusable React hooks for state, themes and responsiveness.
Use built-in icons throughout your application.
Configure light and dark themes.
Reusable helper functions for everyday development.
Build accessible user interfaces.
Customize colors, spacing and components.
See what's new in each release.