diff --git a/package-lock.json b/package-lock.json
index 94cf481a..1a177a46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@floating-ui/react": "^0.26.20",
+        "clsx": "^2.1.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -11419,6 +11420,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
diff --git a/package.json b/package.json
index fbc1d9c4..112c6a35 100644
--- a/package.json
+++ b/package.json
@@ -129,6 +129,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.20",
+    "clsx": "^2.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/src/components/ui/Accordion/fragments/AccordionContent.tsx b/src/components/ui/Accordion/fragments/AccordionContent.tsx
index 84c50c15..60c214ce 100644
--- a/src/components/ui/Accordion/fragments/AccordionContent.tsx
+++ b/src/components/ui/Accordion/fragments/AccordionContent.tsx
@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import { AccordionContext } from '../contexts/AccordionContext';
 import { AccordionItemContext } from '../contexts/AccordionItemContext';
+import { clsx } from 'clsx';
 
 type AccordionContentProps = {
   children: React.ReactNode;
@@ -16,7 +17,7 @@ const AccordionContent: React.FC<AccordionContentProps> = ({ children, index, ac
 
     return (
         <div
-            className={`${rootClass}-content ${className}`}
+            className={clsx(`${rootClass}-content`, className)}
             id={`content-${index}`}
             role="region"
             aria-labelledby={`section-${index}`}
diff --git a/src/components/ui/Accordion/fragments/AccordionHeader.tsx b/src/components/ui/Accordion/fragments/AccordionHeader.tsx
index 9bc3f59b..be02be81 100644
--- a/src/components/ui/Accordion/fragments/AccordionHeader.tsx
+++ b/src/components/ui/Accordion/fragments/AccordionHeader.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { clsx } from 'clsx';
 
 export type AccordionHeaderProps = {
     children: React.ReactNode;
@@ -7,7 +8,7 @@ export type AccordionHeaderProps = {
 
 const AccordionHeader: React.FC<AccordionHeaderProps> = ({ children, className = '' }) => {
     return (
-        <div className={className}>
+        <div className={clsx(className)}>
             {children}
         </div>
     );
diff --git a/src/components/ui/Accordion/fragments/AccordionItem.tsx b/src/components/ui/Accordion/fragments/AccordionItem.tsx
index 4894ec20..084b2c46 100644
--- a/src/components/ui/Accordion/fragments/AccordionItem.tsx
+++ b/src/components/ui/Accordion/fragments/AccordionItem.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useContext, useId, useEffect, useRef } from 'react';
-
+import { clsx } from 'clsx';
 import { AccordionContext } from '../contexts/AccordionContext';
 import { AccordionItemContext } from '../contexts/AccordionItemContext';
 
@@ -61,7 +61,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({ children, value, classNam
         <AccordionItemContext.Provider value={{ itemValue, setItemValue, handleBlurEvent, handleClickEvent, handleFocusEvent }}>
             <div
                 ref={accordionItemRef}
-                className={`${rootClass}-item ${className}`} {...props}
+                className={clsx(`${rootClass}-item`, className)} {...props}
                 id={`accordion-data-item-${id}`}
                 role="region"
                 aria-labelledby={`accordion-trigger-${id}`}
diff --git a/src/components/ui/Accordion/fragments/AccordionRoot.tsx b/src/components/ui/Accordion/fragments/AccordionRoot.tsx
index 93eab535..988d05e4 100644
--- a/src/components/ui/Accordion/fragments/AccordionRoot.tsx
+++ b/src/components/ui/Accordion/fragments/AccordionRoot.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-
+import { clsx } from 'clsx';
 import { customClassSwitcher } from '~/core';
 import { AccordionContext } from '../contexts/AccordionContext';
 import { getAllBatchElements, getNextBatchItem, getPrevBatchItem } from '~/core/batches';
@@ -55,7 +55,7 @@ const AccordionRoot = ({ children, customRootClass }: AccordionRootProps) => {
                 accordionRef
 
             }}>
-            <div className={`${rootClass}-root`} ref={accordionRef} >
+            <div className={clsx(`${rootClass}-root`)} ref={accordionRef}>
                 {children}
             </div>
         </AccordionContext.Provider>
diff --git a/src/components/ui/Accordion/fragments/AccordionTrigger.tsx b/src/components/ui/Accordion/fragments/AccordionTrigger.tsx
index 38f86789..7af88841 100644
--- a/src/components/ui/Accordion/fragments/AccordionTrigger.tsx
+++ b/src/components/ui/Accordion/fragments/AccordionTrigger.tsx
@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import { AccordionContext } from '../contexts/AccordionContext';
 import { AccordionItemContext } from '../contexts/AccordionItemContext';
+import { clsx } from 'clsx';
 
 type AccordionTriggerProps = {
   children: React.ReactNode;
@@ -31,7 +32,7 @@ const AccordionTrigger: React.FC<AccordionTriggerProps> = ({ children, index, cl
 
         <button
             type="button"
-            className={`${rootClass}-trigger ${className}`}
+            className={clsx(`${rootClass}-trigger`, className)}
             onBlur={handleBlurEvent}
             onFocus={onFocusHandler}
             onKeyDown={(e) => {
diff --git a/src/components/ui/AlertDialog/fragments/AlertDialogContent.tsx b/src/components/ui/AlertDialog/fragments/AlertDialogContent.tsx
index 3617fa24..05e74be1 100644
--- a/src/components/ui/AlertDialog/fragments/AlertDialogContent.tsx
+++ b/src/components/ui/AlertDialog/fragments/AlertDialogContent.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { AlertDialogContext } from '../contexts/AlertDialogContext';
-
+import { clsx } from 'clsx';
 export type AlertDialogContentProps = {
     children: React.ReactNode;
 }
@@ -11,7 +11,7 @@ const AlertDialogContent = ({ children } : AlertDialogContentProps) => {
     return (
         <>
             {isOpen && (
-                <div className={`${rootClass}-content`}>
+                <div className={clsx(`${rootClass}-content`)}>
                     {children}
                 </div>
             )}
diff --git a/src/components/ui/AlertDialog/fragments/AlertDialogOverlay.tsx b/src/components/ui/AlertDialog/fragments/AlertDialogOverlay.tsx
index c1bcffab..cec24192 100644
--- a/src/components/ui/AlertDialog/fragments/AlertDialogOverlay.tsx
+++ b/src/components/ui/AlertDialog/fragments/AlertDialogOverlay.tsx
@@ -1,14 +1,14 @@
 import React, { useContext } from 'react';
 import Floater from '~/core/primitives/Floater';
 import { AlertDialogContext } from '../contexts/AlertDialogContext';
-
+import { clsx } from 'clsx';
 const AlertDialogOverlay = () => {
     const { isOpen, rootClass, handleOverlayClick } = useContext(AlertDialogContext);
     return (
         <>
             {isOpen && (
                 <Floater.Overlay
-                    className={`${rootClass}-overlay`} onClick={handleOverlayClick}>
+                    className={clsx(`${rootClass}-overlay`)} onClick={handleOverlayClick}>
 
                 </Floater.Overlay>
             )}
diff --git a/src/components/ui/AlertDialog/fragments/AlertDialogRoot.tsx b/src/components/ui/AlertDialog/fragments/AlertDialogRoot.tsx
index 1f1abab7..c04b0b6d 100644
--- a/src/components/ui/AlertDialog/fragments/AlertDialogRoot.tsx
+++ b/src/components/ui/AlertDialog/fragments/AlertDialogRoot.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { customClassSwitcher } from '~/core';
 import { AlertDialogContext } from '../contexts/AlertDialogContext';
-
+import { clsx } from 'clsx';
 import Floater from '~/core/primitives/Floater';
 
 export type AlertDialogRootProps = {
@@ -31,7 +31,7 @@ const AlertDialogRoot = ({ children, customRootClass = '', open, onOpenChange, o
     const props = { isOpen, handleOpenChange, floaterContext, rootClass, handleOverlayClick };
     return (
         <AlertDialogContext.Provider value={props}>
-            <div className={rootClass} >
+            <div className={clsx(rootClass)} >
                 {children}
             </div>
         </AlertDialogContext.Provider>
diff --git a/src/components/ui/Avatar/Avatar.tsx b/src/components/ui/Avatar/Avatar.tsx
index 3bdd781f..08f3b3c1 100644
--- a/src/components/ui/Avatar/Avatar.tsx
+++ b/src/components/ui/Avatar/Avatar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { clsx } from 'clsx';
 import AvatarPrimitive from '~/core/primitives/Avatar';
 
 const COMPONENT_NAME = 'Avatar';
@@ -20,7 +20,7 @@ const Avatar = ({ customRootClass = '', fallback, className, src, alt, ...props
             <AvatarPrimitive.Image
                 src={src}
                 alt={alt}
-                className={className}
+                className={clsx(className)}
                 {...props}
             />
             <AvatarPrimitive.Fallback>
diff --git a/src/components/ui/AvatarGroup/AvatarGroup.tsx b/src/components/ui/AvatarGroup/AvatarGroup.tsx
index 180782aa..4ef83161 100644
--- a/src/components/ui/AvatarGroup/AvatarGroup.tsx
+++ b/src/components/ui/AvatarGroup/AvatarGroup.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { clsx } from 'clsx';
 import AvatarGroupRoot from './fragments/AvatarGroupRoot';
 import AvatarPrimitiveRoot from '~/core/primitives/Avatar/fragments/AvatarPrimitiveRoot';
 import AvatarPrimitiveFallback from '~/core/primitives/Avatar/fragments/AvatarPrimitiveFallback';
@@ -18,7 +18,7 @@ type AvatarGroupProps = {
 }
 
 const AvatarGroup = ({ avatars = [], size, customRootClass = '', className, ...props }: AvatarGroupProps) => {
-    return <AvatarGroupRoot customRootClass={customRootClass} className={className} {...props} >
+    return <AvatarGroupRoot customRootClass={customRootClass} className={clsx(className)} {...props} >
         {avatars.map((avatar, index) => (
             <AvatarPrimitiveRoot key={index} src={avatar.src}>
                 <AvatarPrimitiveImage src={avatar.src} alt={avatar.alt} />
diff --git a/src/components/ui/AvatarGroup/fragments/AvatarGroupRoot.tsx b/src/components/ui/AvatarGroup/fragments/AvatarGroupRoot.tsx
index 4706369c..90102388 100644
--- a/src/components/ui/AvatarGroup/fragments/AvatarGroupRoot.tsx
+++ b/src/components/ui/AvatarGroup/fragments/AvatarGroupRoot.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { clsx } from 'clsx';
 import { customClassSwitcher } from '~/core/customClassSwitcher';
 
 type AvatarGroupRootProps = {
@@ -11,7 +11,7 @@ type AvatarGroupRootProps = {
 const AvatarGroupRoot = ({ customRootClass = '', children, className, ...props }: AvatarGroupRootProps) => {
     const rootClass = customClassSwitcher(customRootClass, 'AvatarGroup');
     return (
-        <div className={`${rootClass} ${className}`} {...props}>
+        <div className={clsx(rootClass, className)} {...props}>
             {children}
         </div>
     );
diff --git a/src/components/ui/Badge/Badge.tsx b/src/components/ui/Badge/Badge.tsx
index d03ccb7f..4776c577 100644
--- a/src/components/ui/Badge/Badge.tsx
+++ b/src/components/ui/Badge/Badge.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import BadgeRoot from './fragments/BadgeRoot';
 import BadgeContent from './fragments/BadgeContent';
+import { clsx } from 'clsx';
 export type BadgeProps = {
     children?: React.ReactNode,
     customRootClass?: string,
@@ -11,7 +12,7 @@ export type BadgeProps = {
 }
 
 const Badge = ({ children, customRootClass, className, color, ...props }: BadgeProps) => {
-    return <BadgeRoot customRootClass={customRootClass} className={`${className}`} color={color ?? undefined} {...props}>
+    return <BadgeRoot customRootClass={customRootClass} className={clsx(className)} color={color ?? undefined} {...props}>
 
         <BadgeContent>
             {children}
diff --git a/src/components/ui/Badge/fragments/BadgeRoot.tsx b/src/components/ui/Badge/fragments/BadgeRoot.tsx
index 21949bff..8a04bd6b 100644
--- a/src/components/ui/Badge/fragments/BadgeRoot.tsx
+++ b/src/components/ui/Badge/fragments/BadgeRoot.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 const COMPONENT_NAME = 'Badge';
 
 type BadgeRootProps = {
@@ -15,7 +15,7 @@ const BadgeRoot = ({ children, customRootClass, className, color, ...props }:Bad
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
     return (
-        <span className= {`${rootClass} ${className}`} data-accent-color={color ?? undefined} {...props}>
+        <span className={clsx(rootClass, className)} data-accent-color={color ?? undefined} {...props}>
             {children}
         </span>
     );
diff --git a/src/components/ui/BlockQuote/BlockQuote.tsx b/src/components/ui/BlockQuote/BlockQuote.tsx
index 5bf108a8..8c491b88 100644
--- a/src/components/ui/BlockQuote/BlockQuote.tsx
+++ b/src/components/ui/BlockQuote/BlockQuote.tsx
@@ -1,6 +1,6 @@
 'use client';
 import React from 'react';
-
+import { clsx } from 'clsx';
 import { customClassSwitcher } from '~/core';
 
 const COMPONENT_NAME = 'BlockQuote';
@@ -14,7 +14,7 @@ export type BlockQuoteProps = {
 const BlockQuote = ({ children, customRootClass, className, ...props }: BlockQuoteProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
-    return <blockquote className={`${rootClass} ${className}`} {...props}>{children}</blockquote>;
+    return <blockquote className={clsx(rootClass, className)} {...props}>{children}</blockquote>;
 };
 
 BlockQuote.displayName = COMPONENT_NAME;
diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx
index 1277da41..e3cdc02a 100644
--- a/src/components/ui/Button/Button.tsx
+++ b/src/components/ui/Button/Button.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { ButtonHTMLAttributes, DetailedHTMLProps, PropsWithChildren } from 'react';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 import ButtonPrimitive from '~/core/primitives/Button';
 
 // make the color prop default accent color
@@ -21,7 +21,7 @@ const Button = ({ children, type = 'button', customRootClass = '', className = '
     return (
         <ButtonPrimitive
             type={type}
-            className={`${rootClass} button-${variant} ${className} `} data-accent-color={color ?? undefined} data-size={size}
+            className={clsx(rootClass, `button-${variant}`, className)} data-accent-color={color ?? undefined} data-size={size}
             {...props}
         >
             {children}
diff --git a/src/components/ui/Callout/Callout.tsx b/src/components/ui/Callout/Callout.tsx
index f232e09b..d544f74c 100644
--- a/src/components/ui/Callout/Callout.tsx
+++ b/src/components/ui/Callout/Callout.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { clsx } from 'clsx';
 /**
  * Shards
 */
@@ -15,7 +15,7 @@ export type CalloutProps = {
 
 const COMPONENT_NAME = 'Callout';
 const Callout = ({ children, className = '', color, customRootClass, ...props }: CalloutProps) => {
-    return (<CalloutRoot customRootClass={customRootClass} className={`${className}`} color={color ?? undefined} {...props}>
+    return (<CalloutRoot customRootClass={customRootClass} className={clsx(className)} color={color ?? undefined} {...props}>
         {children}
     </CalloutRoot>);
 };
diff --git a/src/components/ui/Callout/fragments/CalloutRoot.tsx b/src/components/ui/Callout/fragments/CalloutRoot.tsx
index 30ea6a8d..db8c1e40 100644
--- a/src/components/ui/Callout/fragments/CalloutRoot.tsx
+++ b/src/components/ui/Callout/fragments/CalloutRoot.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 const COMPONENT_NAME = 'Callout';
 
 type CalloutRootProps = {
@@ -13,7 +13,7 @@ type CalloutRootProps = {
 
 const CalloutRoot = ({ children, className, color, customRootClass, ...props }: CalloutRootProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-    return <div className={`${rootClass} ${className}`} data-accent-color={color ?? undefined} {...props}>
+    return <div className={clsx(rootClass, className)} data-accent-color={color ?? undefined} {...props}>
         {children}
     </div>;
 };
diff --git a/src/components/ui/Card/Card.tsx b/src/components/ui/Card/Card.tsx
index 0fa7efde..bdb6415c 100644
--- a/src/components/ui/Card/Card.tsx
+++ b/src/components/ui/Card/Card.tsx
@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import CardRoot from './fragments/CardRoot';
-
+import { clsx } from 'clsx';
 export type CardProps = {
     customRootClass?: string;
     className?: string;
@@ -8,7 +8,7 @@ export type CardProps = {
 } & React.ComponentProps<'div'>;
 
 const Card = ({ children, className = '', customRootClass, ...props }: PropsWithChildren<CardProps>) => (
-    <CardRoot className={className} customRootClass={customRootClass} {...props}>
+    <CardRoot className={clsx(className)} customRootClass={customRootClass} {...props}>
         {children}
     </CardRoot>
 );
diff --git a/src/components/ui/Card/fragments/CardRoot.tsx b/src/components/ui/Card/fragments/CardRoot.tsx
index 7bf9b7e9..c3f31734 100644
--- a/src/components/ui/Card/fragments/CardRoot.tsx
+++ b/src/components/ui/Card/fragments/CardRoot.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 const COMPONENT_NAME = 'Card';
 export type CardRootProps = {
     children: React.ReactNode;
@@ -13,7 +13,7 @@ const CardRoot = ({ children, customRootClass, className = '', ...props }: CardR
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
     return (
-        <div className={`${rootClass} ${className}`} {...props} >
+        <div className={clsx(rootClass, className)} {...props} >
             {children}
         </div>
     );
diff --git a/src/components/ui/Code/Code.tsx b/src/components/ui/Code/Code.tsx
index 0b0c39ce..7c972946 100644
--- a/src/components/ui/Code/Code.tsx
+++ b/src/components/ui/Code/Code.tsx
@@ -1,12 +1,12 @@
 'use client';
 import React from 'react';
-
+import { clsx } from 'clsx';
 export type CodeProps= {
     children: React.ReactNode;
 }
 
 const Code = ({ children }: CodeProps) => {
-    return <code className='rui-code-root'>
+    return <code className={clsx('rui-code-root')}>
         {children}
     </code>;
 };