diff --git a/package.json b/package.json
index 2716102..cbf98bd 100644
--- a/package.json
+++ b/package.json
@@ -13,12 +13,14 @@
       "require": "./dist/index.js"
     }
   },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
   "devDependencies": {
     "@babel/preset-react": "^7.24.1",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
     "typescript": "^4.0.0"
   },
diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
index 71c4fbe..2c22bb2 100644
--- a/src/components/Alert.tsx
+++ b/src/components/Alert.tsx
@@ -1,6 +1,9 @@
 import React from "react";
-import "./style.css";
+import styles from "./style.module.css";
 import { AlertModalProps } from "../types";
+import { bindClassNames } from "../utils";
+
+const cn = bindClassNames(styles);
 
 export function AlertModal({
   text,
@@ -22,14 +25,14 @@ export function AlertModal({
 
   return (
     <div
-      className={`rha-alert-modal ${className}`}
+      className={cn('rha-alert-modal', className)}
       ref={bgRef}
       onClick={handleClickBackground}
       style={backgroundStyle}
     >
-      <div className="rha-modal-box" style={style}>
+      <div className={cn("rha-modal-box")} style={style}>
         {text}
-        <div className="rha-button-group" style={buttonGroupStyle}>
+        <div className={cn("rha-button-group")} style={buttonGroupStyle}>
           <button onClick={onClose} style={button.style || {}}>
             {button.text || "Ok"}
           </button>
diff --git a/src/components/Confirm.tsx b/src/components/Confirm.tsx
index 0d48dd2..8827b0b 100644
--- a/src/components/Confirm.tsx
+++ b/src/components/Confirm.tsx
@@ -1,6 +1,9 @@
 import React from "react";
-import "./style.css";
+import styles from "./style.module.css";
 import { ConfirmModalProps } from "../types";
+import { bindClassNames } from "../utils";
+
+const cn = bindClassNames(styles);
 
 export function ConfirmModal({
   text,
@@ -24,14 +27,14 @@ export function ConfirmModal({
 
   return (
     <div
-      className={`rha-confirm-modal ${className}`}
+      className={cn('rha-confirm-modal', className)}
       ref={bgRef}
       onClick={handleClickBackground}
       style={backgroundStyle}
     >
-      <div className="rha-modal-box" style={style}>
+      <div className={cn('rha-modal-box')} style={style}>
         {text}
-        <div className="rha-button-group" style={buttonGroupStyle}>
+        <div className={cn('rha-button-group')} style={buttonGroupStyle}>
           <button
             type="button"
             className="outlined"
diff --git a/src/components/style.css b/src/components/style.module.css
similarity index 100%
rename from src/components/style.css
rename to src/components/style.module.css
diff --git a/src/declarations.d.ts b/src/declarations.d.ts
new file mode 100644
index 0000000..d6788b1
--- /dev/null
+++ b/src/declarations.d.ts
@@ -0,0 +1,5 @@
+declare module '*.module.css' {
+    const classes: { [key: string]: string };
+    export default classes;
+  }
+  
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 75b9bdd..c84df7d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1,3 @@
 export { handleAlert, handleConfirm } from "./system";
+export * from "./types";
+export * from "./utils";
\ No newline at end of file
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000..5d59868
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,13 @@
+/**
+ *
+ * @example
+ * import styles from "./styles.module.css";
+ * const cn = bindClassNames(styles);
+ *
+ * <div className={cn("rha-alert-modal", className)}></div>
+ */
+export const bindClassNames =
+  (styles: { [key: string]: string }) =>
+  (...classNames: string[]) => {
+    return classNames.map((className) => styles[className]).join(" ");
+  };