diff --git a/lib/components/box/box.stories.tsx b/lib/components/box/box.stories.tsx
index 6a626b7..5b299fc 100644
--- a/lib/components/box/box.stories.tsx
+++ b/lib/components/box/box.stories.tsx
@@ -15,6 +15,6 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {
     children: "Actually this is a div",
-    className: "bg-primary-base p-4 text-white",
+    className: "zn-bg-primary-base zn-p-4 zn-text-white",
   },
 };
diff --git a/lib/components/calendar/calendar.tsx b/lib/components/calendar/calendar.tsx
index c90a348..884016f 100644
--- a/lib/components/calendar/calendar.tsx
+++ b/lib/components/calendar/calendar.tsx
@@ -96,7 +96,7 @@ export const Calendar = (props: ICalendar) => {
           >
             {format(currentDate, "yyyy")}
           </button>
-          <div className="flex-1" />
+          <div className="zn-flex-1" />
           <button onClick={onPrevMonth} className={theme.headerArrow()}>
             <ArrowLeft2 size={20} />
           </button>
@@ -112,14 +112,14 @@ export const Calendar = (props: ICalendar) => {
           <button onClick={onPrevYear} className={theme.headerArrow()}>
             <ArrowLeft2 size={20} />
           </button>
-          <div className="flex-1" />
+          <div className="zn-flex-1" />
           <button
             className={theme.headerButton()}
             onClick={() => setViewMode("year")}
           >
             {format(currentDate, "yyyy")}
           </button>
-          <div className="flex-1" />
+          <div className="zn-flex-1" />
           <button onClick={onNextYear} className={theme.headerArrow()}>
             <ArrowRight2 size={20} />
           </button>
@@ -134,7 +134,7 @@ export const Calendar = (props: ICalendar) => {
           <button onClick={onPrevDecade} className={theme.headerArrow()}>
             <ArrowLeft2 size={20} />
           </button>
-          <div className="flex-1" />
+          <div className="zn-flex-1" />
           <button
             className={theme.headerButton({
               isNoAction: true,
@@ -142,7 +142,7 @@ export const Calendar = (props: ICalendar) => {
           >
             {`${format(first, "yyyy")} - ${format(last, "yyyy")}`}
           </button>
-          <div className="flex-1" />
+          <div className="zn-flex-1" />
           <button onClick={onNextDecade} className={theme.headerArrow()}>
             <ArrowRight2 size={20} />
           </button>
@@ -228,7 +228,7 @@ export const Calendar = (props: ICalendar) => {
 
       return (
         <div className={tableContainerClasses}>
-          <div className="flex flex-wrap">
+          <div className="zn-flex zn-flex-wrap">
             <table className={tableClasses}>
               {rows.map((row, i) => (
                 <tr key={i} className={valueRowClasses}>
@@ -278,7 +278,7 @@ export const Calendar = (props: ICalendar) => {
 
       return (
         <div className={tableContainerClasses}>
-          <div className="flex flex-wrap">
+          <div className="zn-flex zn-flex-wrap">
             <table className={tableClasses}>
               {rows.map((row, i) => (
                 <tr key={i} className={valueRowClasses}>
diff --git a/lib/components/center/center.stories.tsx b/lib/components/center/center.stories.tsx
index f174c3f..adde3f3 100644
--- a/lib/components/center/center.stories.tsx
+++ b/lib/components/center/center.stories.tsx
@@ -19,7 +19,7 @@ export const Primary: Story = {
     return (
       <Center
         {...rest}
-        className={twMerge("h-[100px] bg-slate-200", rest.className)}
+        className={twMerge("zn-h-[100px] zn-bg-slate-200", rest.className)}
       >
         {children}
       </Center>
@@ -36,7 +36,7 @@ export const CircleComponent: StoryObj<typeof Circle> = {
     return (
       <Circle
         {...rest}
-        className={twMerge("bg-slate-600 text-white", rest.className)}
+        className={twMerge("zn-bg-slate-600 zn-text-white", rest.className)}
       >
         {children}
       </Circle>
diff --git a/lib/components/flex/flex.stories.tsx b/lib/components/flex/flex.stories.tsx
index 71a6813..4d0aa31 100644
--- a/lib/components/flex/flex.stories.tsx
+++ b/lib/components/flex/flex.stories.tsx
@@ -29,10 +29,10 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   render: (args) => {
     return (
-      <Flex className="bg-slate-300 h-[200px]" {...args}>
-        <Box className="bg-red-300 p-4">Block 1</Box>
+      <Flex className="zn-bg-slate-300 zn-h-[200px]" {...args}>
+        <Box className="zn-bg-red-300 zn-p-4">Block 1</Box>
         {/* <Spacer /> */}
-        <Box className="bg-teal-300 p-4">Block 2</Box>
+        <Box className="zn-bg-teal-300 zn-p-4">Block 2</Box>
       </Flex>
     );
   },
@@ -49,10 +49,12 @@ export const Primary: Story = {
 export const Spacer: Story = {
   render: (args) => {
     return (
-      <Flex className="bg-slate-300 h-[200px]" {...args}>
-        <Box className="bg-red-300 p-4">Spacer is the gap between us</Box>
+      <Flex className="zn-bg-slate-300 zn-h-[200px]" {...args}>
+        <Box className="zn-bg-red-300 zn-p-4">Spacer is the gap between us</Box>
         <FlexSpacer />
-        <Box className="bg-teal-300 p-4">Spacer is the gap between us</Box>
+        <Box className="zn-bg-teal-300 zn-p-4">
+          Spacer is the gap between us
+        </Box>
       </Flex>
     );
   },
diff --git a/lib/components/menu/menu.stories.tsx b/lib/components/menu/menu.stories.tsx
index f2ce0d3..3a30483 100644
--- a/lib/components/menu/menu.stories.tsx
+++ b/lib/components/menu/menu.stories.tsx
@@ -42,7 +42,7 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   render: ({ children, ...rest }) => (
     <Menu {...rest}>
-      <Text className="underline cursor-pointer">{children}</Text>
+      <Text className="zn-underline zn-cursor-pointer">{children}</Text>
     </Menu>
   ),
   args: {
diff --git a/lib/components/modal/modal.stories.tsx b/lib/components/modal/modal.stories.tsx
index 4b9ef1d..c331e84 100644
--- a/lib/components/modal/modal.stories.tsx
+++ b/lib/components/modal/modal.stories.tsx
@@ -38,7 +38,7 @@ export const Primary: Story = {
     title: "Modal Title",
     showHeader: true,
     backdropClassName: "",
-    className: "w-[500px]",
+    className: "zn-w-[500px]",
     closeIcon: null,
     isOpen: true,
   },
@@ -68,7 +68,7 @@ export const CenteredModal: Story = {
     isOpen: true,
     title: "Modal Title",
     showHeader: true,
-    className: "w-[500px]",
+    className: "zn-w-[500px]",
   },
 };
 
@@ -77,6 +77,6 @@ export const NoHeaderModal: Story = {
     children: "Hey, this is your modal mate!",
     isOpen: true,
     showHeader: false,
-    className: "w-[400px]",
+    className: "zn-w-[400px]",
   },
 };
diff --git a/lib/components/popover/popover.stories.tsx b/lib/components/popover/popover.stories.tsx
index a84cd44..953be3f 100644
--- a/lib/components/popover/popover.stories.tsx
+++ b/lib/components/popover/popover.stories.tsx
@@ -44,8 +44,11 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   render: ({ children, content, ...rest }) => (
-    <Popover {...rest} content={<Box className="max-w-[250px]">{content}</Box>}>
-      <Text className="underline cursor-pointer">{children}</Text>
+    <Popover
+      {...rest}
+      content={<Box className="zn-max-w-[250px]">{content}</Box>}
+    >
+      <Text className="zn-underline zn-cursor-pointer">{children}</Text>
     </Popover>
   ),
   args: {
diff --git a/lib/customization/styles/components/alert.styles.ts b/lib/customization/styles/components/alert.styles.ts
index 164a595..0558e2e 100644
--- a/lib/customization/styles/components/alert.styles.ts
+++ b/lib/customization/styles/components/alert.styles.ts
@@ -2,34 +2,34 @@ import { cva } from "class-variance-authority";
 
 const base = cva(
   [
-    "block",
-    "flex",
-    "relative",
-    "items-start",
-    "justify-start",
-    "gap-3",
-    "py-3",
-    "px-3",
+    "zn-block",
+    "zn-flex",
+    "zn-relative",
+    "zn-items-start",
+    "zn-justify-start",
+    "zn-gap-3",
+    "zn-py-3",
+    "zn-px-3",
   ],
   {
     variants: {
       variant: {
-        subtle: ["before:hidden"],
+        subtle: ["before:zn-hidden"],
         solid: [],
         "left-accent": [
-          "before:h-full",
-          "before:w-1",
-          "before:top-0",
-          "before:absolute",
-          "before:left-0",
+          "before:zn-h-full",
+          "before:zn-w-1",
+          "before:zn-top-0",
+          "before:zn-absolute",
+          "before:zn-left-0",
         ],
         "top-accent": [
-          "before:h-1",
-          "before:w-full",
-          "before:top-0",
-          "before:absolute",
-          "before:left-0",
-          "before:right-0",
+          "before:zn-h-1",
+          "before:zn-w-full",
+          "before:zn-top-0",
+          "before:zn-absolute",
+          "before:zn-left-0",
+          "before:zn-right-0",
         ],
       },
       status: {
@@ -43,42 +43,42 @@ const base = cva(
       {
         variant: ["subtle", "left-accent", "top-accent"],
         status: "info",
-        class: ["bg-white", "before:bg-info-base"],
+        class: ["zn-bg-white", "before:zn-bg-info-base"],
       },
       {
         variant: ["subtle", "left-accent", "top-accent"],
         status: "success",
-        class: ["bg-white", "before:bg-success-base"],
+        class: ["zn-bg-white", "before:zn-bg-success-base"],
       },
       {
         variant: ["subtle", "left-accent", "top-accent"],
         status: "warning",
-        class: ["bg-white", "before:bg-warning-base"],
+        class: ["zn-bg-white", "before:zn-bg-warning-base"],
       },
       {
         variant: ["subtle", "left-accent", "top-accent"],
         status: "error",
-        class: ["bg-white", "before:bg-error-base"],
+        class: ["zn-bg-white", "before:zn-bg-error-base"],
       },
       {
         variant: "solid",
         status: "info",
-        class: "bg-info-base",
+        class: "zn-bg-info-base",
       },
       {
         variant: "solid",
         status: "success",
-        class: "bg-success-base",
+        class: "zn-bg-success-base",
       },
       {
         variant: "solid",
         status: "warning",
-        class: "bg-warning-base",
+        class: "zn-bg-warning-base",
       },
       {
         variant: "solid",
         status: "error",
-        class: "bg-error-base",
+        class: "zn-bg-error-base",
       },
     ],
     defaultVariants: {
@@ -88,13 +88,13 @@ const base = cva(
   }
 );
 
-const icon = cva(["text-2xl", "border", "rounded-full", "p-2"], {
+const icon = cva(["zn-text-2xl", "zn-border", "zn-rounded-full", "zn-p-2"], {
   variants: {
     status: {
-      info: ["text-info-base"],
-      success: ["text-success-base"],
-      warning: ["text-warning-base"],
-      error: ["text-error-base"],
+      info: ["zn-text-info-base"],
+      success: ["zn-text-success-base"],
+      warning: ["zn-text-warning-base"],
+      error: ["zn-text-error-base"],
     },
     variant: {
       subtle: [],
@@ -107,38 +107,38 @@ const icon = cva(["text-2xl", "border", "rounded-full", "p-2"], {
     {
       variant: ["subtle", "left-accent", "top-accent"],
       status: "info",
-      class: ["text-info-base", "bg-info-10"],
+      class: ["zn-text-info-base", "zn-bg-info-10"],
     },
     {
       variant: ["subtle", "left-accent", "top-accent"],
       status: "success",
-      class: ["text-success-base", "bg-success-10"],
+      class: ["zn-text-success-base", "zn-bg-success-10"],
     },
     {
       variant: ["subtle", "left-accent", "top-accent"],
       status: "warning",
-      class: ["text-warning-base", "bg-warning-10"],
+      class: ["zn-text-warning-base", "zn-bg-warning-10"],
     },
     {
       variant: ["subtle", "left-accent", "top-accent"],
       status: "error",
-      class: ["text-error-base", "bg-error-10"],
+      class: ["zn-text-error-base", "zn-bg-error-10"],
     },
     {
       variant: "solid",
       status: ["info", "success", "warning", "error"],
-      class: ["border-none", "bg-white"],
+      class: ["zn-border-none", "zn-bg-white"],
     },
   ],
 });
 
-const text = cva(["text-base"], {
+const text = cva(["zn-text-base"], {
   variants: {
     status: {
-      info: ["text-info-base"],
-      success: ["text-success-base"],
-      warning: ["text-warning-base"],
-      error: ["text-error-base"],
+      info: ["zn-text-info-base"],
+      success: ["zn-text-success-base"],
+      warning: ["zn-text-warning-base"],
+      error: ["zn-text-error-base"],
     },
     variant: {
       subtle: [],
@@ -151,27 +151,27 @@ const text = cva(["text-base"], {
     {
       variant: ["subtle", "left-accent", "top-accent"],
       status: ["info", "success", "warning", "error"],
-      class: "text-gray-900",
+      class: "zn-text-gray-900",
     },
     {
       variant: "solid",
       status: ["info", "success", "warning", "error"],
-      class: "text-white",
+      class: "zn-text-white",
     },
   ],
 });
-const close = cva(["font-medium", "absolute", "top-3", "right-3"], {
+const close = cva(["zn-font-medium", "zn-absolute", "zn-top-3", "zn-right-3"], {
   variants: {
     variant: {
-      subtle: ["!text-gray-400"],
-      solid: ["!text-white"],
-      "left-accent": ["!text-gray-400"],
-      "top-accent": ["!text-gray-400"],
+      subtle: ["!zn-text-gray-400"],
+      solid: ["!zn-text-white"],
+      "left-accent": ["!zn-text-gray-400"],
+      "top-accent": ["!zn-text-gray-400"],
     },
   },
 });
-const titleText = cva(["font-medium", "m-0", "text-sm"]);
-const descriptionText = cva(["m-0", "text-sm", "font-normal"]);
+const titleText = cva(["zn-font-medium", "zn-m-0", "zn-text-sm"]);
+const descriptionText = cva(["zn-m-0", "zn-text-sm", "zn-font-normal"]);
 
 const alertStyles = {
   base,
diff --git a/lib/customization/styles/components/avatar.styles.ts b/lib/customization/styles/components/avatar.styles.ts
index 0d1ecac..3094468 100644
--- a/lib/customization/styles/components/avatar.styles.ts
+++ b/lib/customization/styles/components/avatar.styles.ts
@@ -2,27 +2,27 @@ import { cva } from "class-variance-authority";
 
 const base = cva(
   [
-    "flex",
-    "justify-center",
-    "items-center",
-    "rounded-full",
-    "overflow-hidden",
-    "uppercase",
-    "bg-primary-base",
-    "border",
-    "border-transparent",
-    "bg-clip-padding",
+    "zn-flex",
+    "zn-justify-center",
+    "zn-items-center",
+    "zn-rounded-full",
+    "zn-overflow-hidden",
+    "zn-uppercase",
+    "zn-bg-primary-base",
+    "zn-border",
+    "zn-border-transparent",
+    "zn-bg-clip-padding",
   ],
   {
     variants: {
       size: {
-        "2xs": ["w-4", "h-4"],
-        xs: ["w-6", "h-6"],
-        sm: ["w-8", "h-8"],
-        md: ["w-12", "h-12"],
-        lg: ["w-16", "h-16"],
-        xl: ["w-28", "h-28"],
-        "2xl": ["w-36", "h-36"],
+        "2xs": ["zn-w-4", "zn-h-4"],
+        xs: ["zn-w-6", "zn-h-6"],
+        sm: ["zn-w-8", "zn-h-8"],
+        md: ["zn-w-12", "zn-h-12"],
+        lg: ["zn-w-16", "zn-h-16"],
+        xl: ["zn-w-28", "zn-h-28"],
+        "2xl": ["zn-w-36", "zn-h-36"],
       },
     },
     defaultVariants: {
@@ -30,29 +30,29 @@ const base = cva(
     },
   }
 );
-const img = cva(["block"], {
+const img = cva(["zn-block"], {
   variants: {
     size: {
-      "2xs": ["w-3", "h-3"],
-      xs: ["w-4", "h-4"],
-      sm: ["w-6", "h-6"],
-      md: ["w-8", "h-8"],
-      lg: ["w-12", "h-12"],
-      xl: ["w-20", "h-20"],
-      "2xl": ["w-24", "h-24"],
+      "2xs": ["zn-w-3", "zn-h-3"],
+      xs: ["zn-w-4", "zn-h-4"],
+      sm: ["zn-w-6", "zn-h-6"],
+      md: ["zn-w-8", "zn-h-8"],
+      lg: ["zn-w-12", "zn-h-12"],
+      xl: ["zn-w-20", "zn-h-20"],
+      "2xl": ["zn-w-24", "zn-h-24"],
     },
   },
 });
-const name = cva(["font-medium", "text-white"], {
+const name = cva(["zn-font-medium", "zn-text-white"], {
   variants: {
     size: {
-      "2xs": ["text-[6px]"],
-      xs: ["text-[10px]"],
-      sm: ["text-sm"],
-      md: ["text-xl"],
-      lg: ["text-2xl"],
-      xl: ["text-5xl"],
-      "2xl": ["text-6xl"],
+      "2xs": ["zn-text-[6px]"],
+      xs: ["zn-text-[10px]"],
+      sm: ["zn-text-sm"],
+      md: ["zn-text-xl"],
+      lg: ["zn-text-2xl"],
+      xl: ["zn-text-5xl"],
+      "2xl": ["zn-text-6xl"],
     },
   },
 });
diff --git a/lib/customization/styles/components/box.styles.ts b/lib/customization/styles/components/box.styles.ts
index 3501015..daa4c50 100644
--- a/lib/customization/styles/components/box.styles.ts
+++ b/lib/customization/styles/components/box.styles.ts
@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 
-const base = cva(["block"]);
+const base = cva(["zn-block"]);
 
 const boxStyles = {
   base,
diff --git a/lib/customization/styles/components/button.styles.ts b/lib/customization/styles/components/button.styles.ts
index c6dc247..112a9c8 100644
--- a/lib/customization/styles/components/button.styles.ts
+++ b/lib/customization/styles/components/button.styles.ts
@@ -2,90 +2,90 @@ import { cva } from "class-variance-authority";
 
 const base = cva(
   [
-    "rounded-base",
-    "disabled:cursor-not-allowed",
-    "transition-opacity",
-    "duration-400",
-    "ease-in-out",
-    "font-semibold",
+    "zn-rounded-base",
+    "disabled:zn-cursor-not-allowed",
+    "zn-transition-opacity",
+    "zn-duration-400",
+    "zn-ease-in-out",
+    "zn-font-semibold",
   ],
   {
     variants: {
       variant: {
         solid: [
-          "border",
-          "bg-primary-base",
-          "border-transparent",
-          "text-white",
+          "zn-border",
+          "zn-bg-primary-base",
+          "zn-border-transparent",
+          "zn-text-white",
 
-          "hover:bg-primary-50",
+          "hover:zn-bg-primary-50",
 
-          "focus:bg-primary-60",
+          "focus:zn-bg-primary-60",
 
-          "active:bg-primary-80",
+          "active:zn-bg-primary-80",
 
-          "disabled:bg-neutral-10",
-          "disabled:text-neutral-40",
+          "disabled:zn-bg-neutral-10",
+          "disabled:zn-text-neutral-40",
         ],
         subtle: [
-          "bg-primary-20",
-          "border",
-          "border-transparent",
+          "zn-bg-primary-20",
+          "zn-border",
+          "zn-border-transparent",
 
-          "hover:bg-primary-10",
+          "hover:zn-bg-primary-10",
 
-          "focus:bg-primary-30",
+          "focus:zn-bg-primary-30",
 
-          "active:bg-primary-40",
+          "active:zn-bg-primary-40",
 
-          "disabled:bg-neutral-10",
-          "disabled:text-neutral-40",
+          "disabled:zn-bg-neutral-10",
+          "disabled:zn-text-neutral-40",
 
-          "disabled:bg-neutral-10",
-          "disabled:text-neutral-40",
+          "disabled:zn-bg-neutral-10",
+          "disabled:zn-text-neutral-40",
         ],
         outline: [
-          "border",
-          "bg-neutral-5",
-          "border-primary-10",
-          "text-neutral-100",
+          "zn-border",
+          "zn-bg-neutral-5",
+          "zn-border-primary-10",
+          "zn-text-neutral-100",
 
-          "hover:border-neutral-10",
-          "hover:text-primary-base",
+          "hover:zn-border-neutral-10",
+          "hover:zn-text-primary-base",
 
-          "active:border-neutral-10",
-          "active:text-primary-base",
+          "active:zn-border-neutral-10",
+          "active:zn-text-primary-base",
 
-          "disabled:bg-neutral-10",
-          "disabled:text-neutral-40",
+          "disabled:zn-bg-neutral-10",
+          "disabled:zn-text-neutral-40",
         ],
         text: [
-          "border",
-          "bg-transparent",
-          "border-transparent",
+          "zn-border",
+          "zn-bg-transparent",
+          "zn-border-transparent",
 
-          "hover:bg-primary-10",
-          "hover:text-primary-base",
+          "hover:zn-bg-primary-10",
+          "hover:zn-text-primary-base",
 
-          "active:bg-primary-10",
-          "active:text-primary-base",
+          "active:zn-bg-primary-10",
+          "active:zn-text-primary-base",
 
-          "disabled:text-neutral-40",
+          "disabled:zn-text-neutral-40",
         ],
         link: [
-          "border",
-          "bg-transparent",
-          "border-transparent",
-          "underline",
-          "text-neutral-100",
-          "disabled:text-neutral-40",
+          "zn-border",
+          "zn-bg-transparent",
+          "zn-border-transparent",
+          "zn-underline",
+          "zn-text-neutral-100",
+          "disabled:zn-text-neutral-40",
         ],
       },
       size: {
-        xs: ["text-xs", "h-[24px]", "py-1", "px-2"],
-        sm: ["text-xs", "h-[32px]", "py-1", "px-4"],
-        md: ["text-sm", "h-[44px]", "py-1", "px-[20px]"],
-        lg: ["text-base", "h-[48px]", "py-1", "px-[24px]"],
+        xs: ["zn-text-xs", "zn-h-[24px]", "zn-py-1", "zn-px-2"],
+        sm: ["zn-text-xs", "zn-h-[32px]", "zn-py-1", "zn-px-4"],
+        md: ["zn-text-sm", "zn-h-[44px]", "zn-py-1", "zn-px-[20px]"],
+        lg: ["zn-text-base", "zn-h-[48px]", "zn-py-1", "zn-px-[24px]"],
       },
       isDanger: {
         true: [],
@@ -97,59 +97,63 @@ const base = cva(
         variant: "solid",
         isDanger: true,
         class: [
-          "bg-error-base",
-          "hover:bg-error-50",
-          "focus:bg-error-60",
-          "active:bg-error-80",
+          "zn-bg-error-base",
+          "hover:zn-bg-error-50",
+          "focus:zn-bg-error-60",
+          "active:zn-bg-error-80",
         ],
       },
       {
         variant: "subtle",
         isDanger: true,
         class: [
-          "bg-error-20",
-          "hover:bg-error-10",
-          "focus:bg-error-30",
-          "active:bg-error-40",
+          "zn-bg-error-20",
+          "hover:zn-bg-error-10",
+          "focus:zn-bg-error-30",
+          "active:zn-bg-error-40",
         ],
       },
       {
         variant: "outline",
         isDanger: true,
         class: [
-          "border-error-base",
-          "text-error-base",
-          "bg-neutral-5",
+          "zn-border-error-base",
+          "zn-text-error-base",
+          "zn-bg-neutral-5",
 
-          "hover:border-error-60",
-          "hover:text-error-60",
-          "hover:bg-neutral-5",
+          "hover:zn-border-error-60",
+          "hover:zn-text-error-60",
+          "hover:zn-bg-neutral-5",
 
-          "focus:border-error-60",
-          "focus:text-error-60",
-          "focus:bg-neutral-5",
+          "focus:zn-border-error-60",
+          "focus:zn-text-error-60",
+          "focus:zn-bg-neutral-5",
 
-          "active:border-error-60",
-          "active:text-error-60",
-          "active:bg-neutral-5",
+          "active:zn-border-error-60",
+          "active:zn-text-error-60",
+          "active:zn-bg-neutral-5",
         ],
       },
       {
         variant: "text",
         isDanger: true,
         class: [
-          "text-error-base",
-          "hover:text-error-base",
-          "hover:bg-error-10",
+          "zn-text-error-base",
+          "hover:zn-text-error-base",
+          "hover:zn-bg-error-10",
 
-          "active:text-error-base",
-          "active:bg-error-10",
+          "active:zn-text-error-base",
+          "active:zn-bg-error-10",
         ],
       },
       {
         variant: "link",
         isDanger: true,
-        class: ["text-error-base", "hover:text-error-base", "hover:underline"],
+        class: [
+          "zn-text-error-base",
+          "hover:zn-text-error-base",
+          "hover:zn-underline",
+        ],
       },
     ],
 
@@ -160,15 +164,20 @@ const base = cva(
   }
 );
 
-const container = cva(["flex", "justify-center", "items-center", "gap-2"]);
+const container = cva([
+  "zn-flex",
+  "zn-justify-center",
+  "zn-items-center",
+  "zn-gap-2",
+]);
 
-const spinner = cva(["animate-spin"], {
+const spinner = cva(["zn-animate-spin"], {
   variants: {
     size: {
-      xs: ["w-[12px]", "h-[12px]"],
-      sm: ["w-[14px]", "h-[14px]"],
-      md: ["w-[18px]", "h-[18px]"],
-      lg: ["w-[20px]", "h-[20px]"],
+      xs: ["zn-w-[12px]", "zn-h-[12px]"],
+      sm: ["zn-w-[14px]", "zn-h-[14px]"],
+      md: ["zn-w-[18px]", "zn-h-[18px]"],
+      lg: ["zn-w-[20px]", "zn-h-[20px]"],
     },
   },
 });
diff --git a/lib/customization/styles/components/calendar.styles.ts b/lib/customization/styles/components/calendar.styles.ts
index 22b9ad1..8ce4c42 100644
--- a/lib/customization/styles/components/calendar.styles.ts
+++ b/lib/customization/styles/components/calendar.styles.ts
@@ -1,52 +1,52 @@
 import { cva } from "class-variance-authority";
 
 // CONTAINER
-const container = cva(["block", "bg-white"]);
-const tableContainer = cva(["w-full", "py-2", "px-4"]);
-const table = cva(["table-fixed", "w-full", "max-w-full"]); // i dont know why "w-full" crashes the browser
+const container = cva(["zn-block", "zn-bg-white"]);
+const tableContainer = cva(["zn-w-full", "zn-py-2", "zn-px-4"]);
+const table = cva(["zn-table-fixed", "zn-w-full", "zn-max-w-full"]); // i dont know why "zn-w-full" crashes the browser
 
 // DAY VIEW
 const labelCell = cva([
-  "px-1",
-  "text-center",
-  "font-medium",
-  "h-[36px]",
-  "text-sm",
+  "zn-px-1",
+  "zn-text-center",
+  "zn-font-medium",
+  "zn-h-[36px]",
+  "zn-text-sm",
 ]);
-const valueCell = cva(["px-1"]);
+const valueCell = cva(["zn-px-1"]);
 const valueCellInner = cva(
   [
-    "my-0.5",
-    "block",
-    "w-[28px]",
-    "h-[28px]",
-    "mx-auto",
-    "text-center",
-    "text-sm",
-    "border",
-    "border-transparent",
-    "rounded",
-    "leading-[24px]",
-    "hover:cursor-pointer",
-    "hover:bg-gray-200",
-    "hover:text-neutral-100",
+    "zn-my-0.5",
+    "zn-block",
+    "zn-w-[28px]",
+    "zn-h-[28px]",
+    "zn-mx-auto",
+    "zn-text-center",
+    "zn-text-sm",
+    "zn-border",
+    "zn-border-transparent",
+    "zn-rounded",
+    "zn-leading-[24px]",
+    "hover:zn-cursor-pointer",
+    "hover:zn-bg-gray-200",
+    "hover:zn-text-neutral-100",
   ],
   {
     variants: {
       isToday: {
-        true: ["!text-primary-base", "!border-primary-base"],
+        true: ["!zn-text-primary-base", "!zn-border-primary-base"],
       },
       isSameMonth: {
-        true: ["text-neutral-100"],
-        false: ["text-gray-300"],
+        true: ["zn-text-neutral-100"],
+        false: ["zn-text-gray-300"],
       },
       isSelectedDate: {
-        true: ["!text-white", "!bg-primary-base", "!font-medium"],
+        true: ["!zn-text-white", "!zn-bg-primary-base", "!zn-font-medium"],
       },
       isDisabled: {
         true: [
-          "!bg-gray-200",
-          "hover:!cursor-not-allowed",
+          "!zn-bg-gray-200",
+          "hover:!zn-cursor-not-allowed",
           "hover:!text-gray-300",
         ],
         false: [],
@@ -56,42 +56,42 @@ const valueCellInner = cva(
       {
         isDisabled: true,
         isSameMonth: true,
-        className: ["!text-gray-300"],
+        className: ["!zn-text-gray-300"],
       },
     ],
   }
 );
 
 // MONTH VIEW
-const monthPickValueCell = cva(["px-1"]);
+const monthPickValueCell = cva(["zn-px-1"]);
 const monthPickValueCellInner = cva(
   [
-    "my-0.5",
-    "block",
-    "w-full",
-    "h-[28px]",
-    "px-2",
-    "mx-auto",
-    "text-center",
-    "border",
-    "border-transparent",
-    "rounded",
-    "leading-[24px]",
-    "hover:cursor-pointer",
-    "hover:bg-gray-200",
-    "hover:text-neutral-100",
+    "zn-my-0.5",
+    "zn-block",
+    "zn-w-full",
+    "zn-h-[28px]",
+    "zn-px-2",
+    "zn-mx-auto",
+    "zn-text-center",
+    "zn-border",
+    "zn-border-transparent",
+    "zn-rounded",
+    "zn-leading-[24px]",
+    "hover:zn-cursor-pointer",
+    "hover:zn-bg-gray-200",
+    "hover:zn-text-neutral-100",
   ],
   {
     variants: {
       isSameMonth: {
-        true: ["text-primary-base"],
-        false: ["text-neutral-100"],
+        true: ["zn-text-primary-base"],
+        false: ["zn-text-neutral-100"],
       },
       isDisabled: {
         true: [
-          "!bg-gray-200",
-          "hover:!cursor-not-allowed",
-          "hover:text-neutral-100",
+          "!zn-bg-gray-200",
+          "hover:!zn-cursor-not-allowed",
+          "hover:zn-text-neutral-100",
         ],
         false: [],
       },
@@ -100,35 +100,35 @@ const monthPickValueCellInner = cva(
 );
 
 // YEAR VIEW
-const yearPickValueCell = cva(["px-1"]);
+const yearPickValueCell = cva(["zn-px-1"]);
 const yearPickValueCellInner = cva(
   [
-    "my-0.5",
-    "block",
-    "w-full",
-    "h-[28px]",
-    "px-2",
-    "mx-auto",
-    "text-center",
-    "border",
-    "border-transparent",
-    "rounded",
-    "leading-[24px]",
-    "hover:cursor-pointer",
-    "hover:bg-gray-200",
-    "hover:text-neutral-100",
+    "zn-my-0.5",
+    "zn-block",
+    "zn-w-full",
+    "zn-h-[28px]",
+    "zn-px-2",
+    "zn-mx-auto",
+    "zn-text-center",
+    "zn-border",
+    "zn-border-transparent",
+    "zn-rounded",
+    "zn-leading-[24px]",
+    "hover:zn-cursor-pointer",
+    "hover:zn-bg-gray-200",
+    "hover:zn-text-neutral-100",
   ],
   {
     variants: {
       isSameYear: {
-        true: ["text-primary-base"],
-        false: ["text-neutral-100"],
+        true: ["zn-text-primary-base"],
+        false: ["zn-text-neutral-100"],
       },
       isDisabled: {
         true: [
-          "!bg-gray-200",
-          "hover:!cursor-not-allowed",
-          "hover:text-neutral-100",
+          "!zn-bg-gray-200",
+          "hover:!zn-cursor-not-allowed",
+          "hover:zn-text-neutral-100",
         ],
         false: [],
       },
@@ -137,52 +137,52 @@ const yearPickValueCellInner = cva(
 );
 
 // COMMON
-const labelRow = cva(["mb-4"]);
+const labelRow = cva(["zn-mb-4"]);
 const valueRow = cva([]);
 const header = cva([
-  "flex",
-  "items-center",
-  "w-full",
-  "gap-1",
-  "px-[20px]",
-  "pt-4",
-  // "border-b",
-  // "border-base",
+  "zn-flex",
+  "zn-items-center",
+  "zn-w-full",
+  "zn-gap-1",
+  "zn-px-[20px]",
+  "zn-pt-4",
+  // "zn-border-b",
+  // "zn-border-base",
 ]);
 const headerButton = cva(
   [
-    "rounded-md",
-    "font-medium",
-    "px-1",
-    "py-1",
-    "leading-none",
-    "hover:text-primary-base",
-    "hover:bg-gray-100",
-    "text-base",
+    "zn-rounded-md",
+    "zn-font-medium",
+    "zn-px-1",
+    "zn-py-1",
+    "zn-leading-none",
+    "hover:zn-text-primary-base",
+    "hover:zn-bg-gray-100",
+    "zn-text-base",
   ],
   {
     variants: {
       isNoAction: {
-        true: ["!cursor-default", "pointer-events-none"],
+        true: ["!cursor-default", "zn-pointer-events-none"],
         false: [],
       },
     },
   }
 );
-const headerArrow = cva(["text-neutral-100", "hover:text-neutral-50"]);
+const headerArrow = cva(["zn-text-neutral-100", "hover:zn-text-neutral-50"]);
 
 // FOOTER
 const footer = cva([
-  "flex",
-  "justify-center",
-  "border-t",
-  "border-neutral-10",
-  "py-2",
+  "zn-flex",
+  "zn-justify-center",
+  "zn-border-t",
+  "zn-border-neutral-10",
+  "zn-py-2",
 ]);
 const footerButton = cva([
-  "block",
-  "hover:cursor-pointer",
-  "text-primary-base",
+  "zn-block",
+  "hover:zn-cursor-pointer",
+  "zn-text-primary-base",
 ]);
 
 const calendarStyles = {
diff --git a/lib/customization/styles/components/center.styles.ts b/lib/customization/styles/components/center.styles.ts
index 4cea50c..8799df0 100644
--- a/lib/customization/styles/components/center.styles.ts
+++ b/lib/customization/styles/components/center.styles.ts
@@ -1,8 +1,18 @@
 import { cva } from "class-variance-authority";
 
-const base = cva(["flex w-full justify-center items-center"]);
+const base = cva([
+  "zn-flex",
+  "zn-w-full",
+  "zn-justify-center",
+  "zn-items-center",
+]);
 const circle = cva([
-  "flex justify-center items-center rounded-full w-fit h-fit",
+  "zn-flex",
+  "zn-justify-center",
+  "zn-items-center",
+  "zn-rounded-full",
+  "zn-w-fit",
+  "zn-h-fit",
 ]);
 
 const centerStyles = {
diff --git a/lib/customization/styles/components/checkbox.styles.ts b/lib/customization/styles/components/checkbox.styles.ts
index b73bf97..7610155 100644
--- a/lib/customization/styles/components/checkbox.styles.ts
+++ b/lib/customization/styles/components/checkbox.styles.ts
@@ -1,11 +1,11 @@
 import { cva } from "class-variance-authority";
 
 const container = cva(
-  ["flex", "items-center", "w-fit", "gap-2", "select-none"],
+  ["zn-flex", "zn-items-center", "zn-w-fit", "zn-gap-2", "zn-select-none"],
   {
     variants: {
       isDisabled: {
-        true: ["cursor-not-allowed"],
+        true: ["zn-cursor-not-allowed"],
         false: [],
       },
     },
@@ -13,43 +13,43 @@ const container = cva(
 );
 const input = cva(
   [
-    "form-checkbox",
-    "!rounded-[4px]",
-    "border-neutral-100",
-    "checked:bg-primary-base",
-    "text-primary-base",
-    "focus:ring-2",
-    "focus:ring-primary-20",
-    "focus:!ring-offset-0",
-    "active:ring-2",
-    "active:ring-primary-20",
-    "active:!ring-offset-0",
+    "zn-form-checkbox",
+    "!zn-rounded-[4px]",
+    "zn-border-neutral-100",
+    "checked:zn-bg-primary-base",
+    "zn-text-primary-base",
+    "focus:zn-ring-2",
+    "focus:zn-ring-primary-20",
+    "focus:!zn-ring-offset-0",
+    "active:zn-ring-2",
+    "active:zn-ring-primary-20",
+    "active:!zn-ring-offset-0",
   ],
   {
     variants: {
       size: {
-        sm: ["h-3", "w-3"],
-        md: ["h-4", "w-4"],
-        lg: ["h-5", "w-5"],
+        sm: ["zn-h-3", "zn-w-3"],
+        md: ["zn-h-4", "zn-w-4"],
+        lg: ["zn-h-5", "zn-w-5"],
       },
       indeterminate: {
         true: [],
         false: [],
       },
       readOnly: {
-        true: ["pointer-events-none"],
+        true: ["zn-pointer-events-none"],
       },
       isDisabled: {
         true: [
-          "cursor-not-allowed",
-          "checked:bg-neutral-20",
-          "checked:border-neutral-20",
-          "bg-neutral-10",
-          "border-neutral-10",
-          "hover:bg-neutral-10",
-          "checked:hover:bg-neutral-20",
-          "active:ring-0",
-          "focus:ring-0",
+          "zn-cursor-not-allowed",
+          "checked:zn-bg-neutral-20",
+          "checked:zn-border-neutral-20",
+          "zn-bg-neutral-10",
+          "zn-border-neutral-10",
+          "hover:zn-bg-neutral-10",
+          "checked:hover:zn-bg-neutral-20",
+          "active:zn-ring-0",
+          "focus:zn-ring-0",
         ],
         false: [],
       },
@@ -59,19 +59,19 @@ const input = cva(
     },
   }
 );
-const label = cva(["text-sm", "font-medium", "text-neutral-100"], {
+const label = cva(["zn-text-sm", "zn-font-medium", "zn-text-neutral-100"], {
   variants: {
     isDisabled: {
-      true: ["text-neutral-40"],
+      true: ["zn-text-neutral-40"],
       false: [],
     },
   },
 });
-const group = cva(["flex"], {
+const group = cva(["zn-flex"], {
   variants: {
     layout: {
-      vertical: ["flex-col", "gap-2"],
-      horizontal: ["flex-row", "gap-2-4", "gap-x-10"],
+      vertical: ["zn-flex-col", "zn-gap-2"],
+      horizontal: ["zn-flex-row", "zn-gap-2-4", "zn-gap-x-10"],
     },
   },
 });
diff --git a/lib/customization/styles/components/date-picker.styles.ts b/lib/customization/styles/components/date-picker.styles.ts
index 4e1003a..6328d62 100644
--- a/lib/customization/styles/components/date-picker.styles.ts
+++ b/lib/customization/styles/components/date-picker.styles.ts
@@ -2,61 +2,61 @@ import { cva } from "class-variance-authority";
 
 const container = cva(
   [
-    "rounded-base",
-    "text-neutral-100",
-    "w-fit",
-    "outline",
-    "outline-1",
-    "outline-transparent",
-    "w-full",
+    "zn-rounded-base",
+    "zn-text-neutral-100",
+    "zn-w-fit",
+    "zn-outline",
+    "zn-outline-1",
+    "zn-outline-transparent",
+    "zn-w-full",
   ],
   {
     variants: {
       size: {
-        xs: ["h-6"],
-        sm: ["h-8"],
-        md: ["h-10"],
-        lg: ["h-12"],
+        xs: ["zn-h-6"],
+        sm: ["zn-h-8"],
+        md: ["zn-h-10"],
+        lg: ["zn-h-12"],
       },
       variant: {
         outline: [
-          "border",
-          "border-base",
+          "zn-border",
+          "zn-border-base",
 
-          "hover:!border-primary-base",
+          "hover:!zn-border-primary-base",
 
-          "focus-within:!border-primary-base",
-          "focus-within:!outline-primary-20",
-          "focus-within:!outline-2",
+          "focus-within:!zn-border-primary-base",
+          "focus-within:!zn-outline-primary-20",
+          "focus-within:!zn-outline-2",
         ],
         filled: [
-          "bg-primary-10",
+          "zn-bg-primary-10",
 
-          "border",
-          "border-primary-10",
+          "zn-border",
+          "zn-border-primary-10",
 
-          "hover:!border-primary-base",
+          "hover:!zn-border-primary-base",
 
-          "focus-within:!border-primary-base",
-          "focus-within:!outline-primary-20",
-          "focus-within:!outline-2",
-          "focus-within:!bg-transparent",
+          "focus-within:!zn-border-primary-base",
+          "focus-within:!zn-outline-primary-20",
+          "focus-within:!zn-outline-2",
+          "focus-within:!zn-bg-transparent",
         ],
         flushed: [
-          "!rounded-none",
+          "!zn-rounded-none",
 
-          "border-b",
-          "border-b-primary-base",
+          "zn-border-b",
+          "zn-border-b-primary-base",
 
-          "hover:shadow-[0_1px_0_0_var(--color-primary)]",
-          "focus-within:!shadow-[0_1px_0_0_var(--color-primary)]",
-          "focus-within:!border-b-primary-base",
+          "hover:zn-shadow-[0_1px_0_0_var(--color-primary)]",
+          "focus-within:!zn-shadow-[0_1px_0_0_var(--color-primary)]",
+          "focus-within:!zn-border-b-primary-base",
 
-          "!px-0",
+          "!zn-px-0",
         ],
       },
       isDisabled: {
-        true: ["!bg-neutral-10", "cursor-not-allowed"],
+        true: ["!zn-bg-neutral-10", "zn-cursor-not-allowed"],
         false: [],
       },
     },
@@ -65,70 +65,70 @@ const container = cva(
 
 const input = cva(
   [
-    "rounded-md",
-    "w-full",
-    "h-full",
-    "!bg-transparent",
-    "outline-none",
-    "cursor-pointer",
-    "caret-transparent",
-    "placeholder:text-neutral-40",
+    "zn-rounded-md",
+    "zn-w-full",
+    "zn-h-full",
+    "!zn-bg-transparent",
+    "zn-outline-none",
+    "zn-cursor-pointer",
+    "zn-caret-transparent",
+    "placeholder:zn-text-neutral-40",
   ],
   {
     variants: {
       size: {
-        xs: ["text-xs"],
-        sm: ["text-sm"],
-        md: ["text-sm"],
-        lg: ["text-base"],
+        xs: ["zn-text-xs"],
+        sm: ["zn-text-sm"],
+        md: ["zn-text-sm"],
+        lg: ["zn-text-base"],
       },
       variant: {
         outline: [],
         filled: [],
-        flushed: ["!px-0"],
-        unstyled: ["!px-0"],
+        flushed: ["!zn-px-0"],
+        unstyled: ["!zn-px-0"],
       },
       isInGroup: {
-        true: ["!px-0"],
+        true: ["!zn-px-0"],
         false: [],
       },
       isDisabled: {
-        true: ["cursor-not-allowed"],
+        true: ["zn-cursor-not-allowed"],
         false: [],
       },
     },
   }
 );
 
-const group = cva(["flex", "items-center"]);
+const group = cva(["zn-flex", "zn-items-center"]);
 const leftElement = cva([
-  "flex",
-  "items-center",
-  "justify-center",
-  "px-4",
-  "text-gray-500",
+  "zn-flex",
+  "zn-items-center",
+  "zn-justify-center",
+  "zn-px-4",
+  "zn-text-gray-500",
 ]);
 const clearElement = cva([
-  "flex",
-  "items-center",
-  "justify-center",
-  "my-3",
-  "mx-3",
-  "[&>div]:p-1",
-  "[&>div]:hover:bg-gray-100",
-  "[&>div]:hover:cursor-pointer",
-  "[&>div]:hover:rounded-lg",
+  "zn-flex",
+  "zn-items-center",
+  "zn-justify-center",
+  "zn-my-3",
+  "zn-mx-3",
+  "[&>div]:zn-p-1",
+  "[&>div]:hover:zn-bg-gray-100",
+  "[&>div]:hover:zn-cursor-pointer",
+  "[&>div]:hover:zn-rounded-lg",
 ]);
 const dropdown = cva([
-  "rounded-lg",
-  "bg-sec-background",
-  "text-neutral-100",
-  "text-base",
-  "shadow-base",
-  "overflow-hidden",
-  "w-[270px]",
+  "zn-rounded-lg",
+  "zn-bg-sec-background",
+  "zn-text-neutral-100",
+  "zn-text-base",
+  "zn-shadow-base",
+  "zn-overflow-hidden",
+  "zn-w-[270px]",
 ]);
-const iconColor = cva(["text-gray-500"]);
+const iconColor = cva(["zn-text-gray-500"]);
 
 const datePickerStyles = {
   container,
diff --git a/lib/customization/styles/components/flex.styles.ts b/lib/customization/styles/components/flex.styles.ts
index 1ef94de..fe06542 100644
--- a/lib/customization/styles/components/flex.styles.ts
+++ b/lib/customization/styles/components/flex.styles.ts
@@ -1,32 +1,32 @@
 import { cva } from "class-variance-authority";
 
-const base = cva(["flex"], {
+const base = cva(["zn-flex"], {
   variants: {
     direction: {
-      row: ["flex-row"],
-      "row-reverse": ["flex-row-reverse"],
-      column: ["flex-col"],
-      "column-reverse": ["flex-col-reverse"],
+      row: ["zn-flex-row"],
+      "row-reverse": ["zn-flex-row-reverse"],
+      column: ["zn-flex-col"],
+      "column-reverse": ["zn-flex-col-reverse"],
     },
     justify: {
-      "flex-end": ["justify-end"],
-      "flex-start": ["justify-start"],
-      center: ["justify-center"],
-      "space-around": ["justify-around"],
-      "space-between": ["justify-between"],
-      "space-evenly": ["justify-evenly"],
+      "flex-end": ["zn-justify-end"],
+      "flex-start": ["zn-justify-start"],
+      center: ["zn-justify-center"],
+      "space-around": ["zn-justify-around"],
+      "space-between": ["zn-justify-between"],
+      "space-evenly": ["zn-justify-evenly"],
     },
     align: {
-      "flex-end": ["items-end"],
-      "flex-start": ["items-start"],
-      center: ["items-center"],
-      baseline: ["items-baseline"],
-      stretch: ["items-stretch"],
+      "flex-end": ["zn-items-end"],
+      "flex-start": ["zn-items-start"],
+      center: ["zn-items-center"],
+      baseline: ["zn-items-baseline"],
+      stretch: ["zn-items-stretch"],
     },
     wrap: {
-      nowrap: ["flex-nowrap"],
-      wrap: ["flex-wrap"],
-      "wrap-reverse": ["flex-wrap-reverse"],
+      nowrap: ["zn-flex-nowrap"],
+      wrap: ["zn-flex-wrap"],
+      "wrap-reverse": ["zn-flex-wrap-reverse"],
     },
   },
   defaultVariants: {
@@ -37,7 +37,7 @@ const base = cva(["flex"], {
   },
 });
 
-const spacer = cva(["flex-1 place-self-stretch"]);
+const spacer = cva(["zn-flex-1", "zn-place-self-stretch"]);
 
 const flexStyles = {
   base,
diff --git a/lib/customization/styles/components/image.styles.ts b/lib/customization/styles/components/image.styles.ts
index 72157b0..4a183c4 100644
--- a/lib/customization/styles/components/image.styles.ts
+++ b/lib/customization/styles/components/image.styles.ts
@@ -1,45 +1,50 @@
 import { cva } from "class-variance-authority";
 
-const img = cva(["block", "h-auto", "select-none"]);
-const imgPreview = cva(["block", "h-auto", "select-none", "w-full"]);
+const img = cva(["zn-block", "zn-h-auto", "zn-select-none"]);
+const imgPreview = cva([
+  "zn-block",
+  "zn-h-auto",
+  "zn-select-none",
+  "zn-w-full",
+]);
 const backdrop = cva([
-  "fixed",
-  "bg-black",
-  "bg-opacity-50",
-  "inset-0",
-  "overflow-hidden",
-  "w-full",
-  "h-full",
-  "flex",
-  "justify-center",
-  "items-center",
+  "zn-fixed",
+  "zn-bg-black",
+  "zn-bg-opacity-50",
+  "zn-inset-0",
+  "zn-overflow-hidden",
+  "zn-w-full",
+  "zn-h-full",
+  "zn-flex",
+  "zn-justify-center",
+  "zn-items-center",
 ]);
-const imgContainer = cva(["select-none"]);
-const isPreviewable = cva(["hover:brightness-75", "cursor-pointer"]);
+const imgContainer = cva(["zn-select-none"]);
+const isPreviewable = cva(["hover:zn-brightness-75", "zn-cursor-pointer"]);
 const tools = cva([
-  "flex",
-  "items-center",
-  "gap-1",
-  "fixed",
-  "left-[50%]",
-  "-translate-x-1/2",
-  "bottom-3",
-  "bg-black",
-  "bg-opacity-60",
-  "rounded-lg",
-  "px-2",
-  "py-1",
-  "select-none",
+  "zn-flex",
+  "zn-items-center",
+  "zn-gap-1",
+  "zn-fixed",
+  "zn-left-[50%]",
+  "-zn-translate-x-1/2",
+  "zn-bottom-3",
+  "zn-bg-black",
+  "zn-bg-opacity-60",
+  "zn-rounded-lg",
+  "zn-px-2",
+  "zn-py-1",
+  "zn-select-none",
   "backdrop-blur-sm",
 ]);
 const toolIcon = cva([
-  "p-2",
-  "cursor-pointer",
-  "text-white",
-  "hover:brightness-75",
-  "select-none",
-  "hover:scale-110",
-  "active:scale-100",
+  "zn-p-2",
+  "zn-cursor-pointer",
+  "zn-text-white",
+  "hover:zn-brightness-75",
+  "zn-select-none",
+  "hover:zn-scale-110",
+  "active:zn-scale-100",
 ]);
 const imageStyles = {
   img,
diff --git a/lib/customization/styles/components/input.styles.ts b/lib/customization/styles/components/input.styles.ts
index 76a8190..eaeb1a9 100644
--- a/lib/customization/styles/components/input.styles.ts
+++ b/lib/customization/styles/components/input.styles.ts
@@ -2,75 +2,75 @@ import { cva } from "class-variance-authority";
 
 const container = cva(
   [
-    "rounded-base",
-    "text-neutral-100",
-    "w-fit",
-    "outline",
-    "outline-1",
-    "outline-transparent",
-    "w-full",
+    "zn-rounded-base",
+    "zn-text-neutral-100",
+    "zn-w-fit",
+    "zn-outline",
+    "zn-outline-1",
+    "zn-outline-transparent",
+    "zn-w-full",
   ],
   {
     variants: {
       size: {
-        xs: ["h-6"],
-        sm: ["h-8"],
-        md: ["h-10"],
-        lg: ["h-12"],
+        xs: ["zn-h-6"],
+        sm: ["zn-h-8"],
+        md: ["zn-h-10"],
+        lg: ["zn-h-12"],
       },
       variant: {
         outline: [
-          "border",
-          "border-base",
+          "zn-border",
+          "zn-border-base",
 
-          "hover:!border-primary-base",
+          "hover:!zn-border-primary-base",
 
-          "focus-within:!border-primary-base",
-          "focus-within:!outline-primary-20",
-          "focus-within:!outline-2",
+          "focus-within:!zn-border-primary-base",
+          "focus-within:!zn-outline-primary-20",
+          "focus-within:!zn-outline-2",
 
-          "focus-within:!ring-2",
-          "focus-within:!ring-primary-20",
+          "focus-within:!zn-ring-2",
+          "focus-within:!zn-ring-primary-20",
         ],
         filled: [
-          "bg-primary-10",
+          "zn-bg-primary-10",
 
-          "border",
-          "border-primary-10",
+          "zn-border",
+          "zn-border-primary-10",
 
-          "hover:!border-primary-base",
+          "hover:!zn-border-primary-base",
 
-          "focus-within:!border-primary-base",
-          "focus-within:!outline-primary-20",
-          "focus-within:!outline-2",
-          "focus-within:!bg-transparent",
+          "focus-within:!zn-border-primary-base",
+          "focus-within:!zn-outline-primary-20",
+          "focus-within:!zn-outline-2",
+          "focus-within:!zn-bg-transparent",
 
-          "focus-within:!ring-2",
-          "focus-within:!ring-primary-20",
+          "focus-within:!zn-ring-2",
+          "focus-within:!zn-ring-primary-20",
         ],
         flushed: [
-          "!rounded-none",
+          "!zn-rounded-none",
 
-          "border-b",
-          "border-b-primary-base",
+          "zn-border-b",
+          "zn-border-b-primary-base",
 
-          "hover:shadow-[0_1px_0_0_var(--color-primary)]",
-          "focus-within:!shadow-[0_1px_0_0_var(--color-primary)]",
-          "focus-within:!border-b-primary-base",
+          "hover:zn-shadow-[0_1px_0_0_var(--color-primary)]",
+          "focus-within:!zn-shadow-[0_1px_0_0_var(--color-primary)]",
+          "focus-within:!zn-border-b-primary-base",
 
-          "!px-0",
+          "!zn-px-0",
         ],
       },
       addonRight: {
-        true: ["!pl-4"],
+        true: ["!zn-pl-4"],
         false: [],
       },
       addonLeft: {
-        true: ["!pr-4"],
+        true: ["!zn-pr-4"],
         false: [],
       },
       isDisabled: {
-        true: ["!bg-neutral-10", "cursor-not-allowed"],
+        true: ["!zn-bg-neutral-10", "zn-cursor-not-allowed"],
         false: [],
       },
     },
@@ -78,7 +78,7 @@ const container = cva(
       {
         addonLeft: true,
         addonRight: true,
-        class: "!px-0",
+        class: "!zn-px-0",
       },
     ],
   }
@@ -86,41 +86,51 @@ const container = cva(
 
 const input = cva(
   [
-    "rounded-md",
-    "w-full",
-    "h-full",
-    "!bg-transparent",
-    "outline-none",
-    "placeholder:text-neutral-40",
+    "zn-rounded-md",
+    "zn-w-full",
+    "zn-h-full",
+    "!zn-bg-transparent",
+    "zn-outline-none",
+    "placeholder:zn-text-neutral-40",
   ],
   {
     variants: {
       size: {
-        xs: ["px-4", "text-xs"],
-        sm: ["px-4", "text-sm"],
-        md: ["px-4", "text-sm"],
-        lg: ["px-4", "text-base"],
+        xs: ["zn-px-4", "zn-text-xs"],
+        sm: ["zn-px-4", "zn-text-sm"],
+        md: ["zn-px-4", "zn-text-sm"],
+        lg: ["zn-px-4", "zn-text-base"],
       },
       variant: {
         outline: [],
         filled: [],
-        flushed: ["!px-0"],
+        flushed: ["!zn-px-0"],
       },
       isInGroup: {
-        true: ["!px-0"],
+        true: ["!zn-px-0"],
         false: [],
       },
       isDisabled: {
-        true: ["cursor-not-allowed"],
+        true: ["zn-cursor-not-allowed"],
         false: [],
       },
     },
   }
 );
 
-const group = cva(["flex", "items-center"]);
-const leftElement = cva(["flex", "items-center", "justify-center", "px-4"]);
-const rightElement = cva(["flex", "items-center", "justify-center", "px-4"]);
+const group = cva(["zn-flex", "zn-items-center"]);
+const leftElement = cva([
+  "zn-flex",
+  "zn-items-center",
+  "zn-justify-center",
+  "zn-px-4",
+]);
+const rightElement = cva([
+  "zn-flex",
+  "zn-items-center",
+  "zn-justify-center",
+  "zn-px-4",
+]);
 const inputStyles = {
   container,
   input,
diff --git a/lib/customization/styles/components/menu.styles.ts b/lib/customization/styles/components/menu.styles.ts
index 1f4db5b..e050bed 100644
--- a/lib/customization/styles/components/menu.styles.ts
+++ b/lib/customization/styles/components/menu.styles.ts
@@ -1,23 +1,23 @@
 import { cva } from "class-variance-authority";
 
 const base = cva([
-  "rounded-base",
-  "p-1",
-  "bg-color-component-background",
-  "text-neutral-100",
-  "shadow-base",
+  "zn-rounded-base",
+  "zn-p-1",
+  "zn-bg-color-component-background",
+  "zn-text-neutral-100",
+  "zn-shadow-base",
 ]);
 const item = cva([
-  "w-full",
-  "px-3",
-  "py-2",
-  "rounded-base",
-  "hover:bg-primary-10",
-  "cursor-pointer",
-  "text-sm",
-  "font-medium",
-  "flex",
-  "gap-2",
+  "zn-w-full",
+  "zn-px-3",
+  "zn-py-2",
+  "zn-rounded-base",
+  "hover:zn-bg-primary-10",
+  "zn-cursor-pointer",
+  "zn-text-sm",
+  "zn-font-medium",
+  "zn-flex",
+  "zn-gap-2",
 ]);
 const itemIcon = cva([]);
 const arrow = cva([]);
diff --git a/lib/customization/styles/components/modal.styles.ts b/lib/customization/styles/components/modal.styles.ts
index aba7e41..51e6e7f 100644
--- a/lib/customization/styles/components/modal.styles.ts
+++ b/lib/customization/styles/components/modal.styles.ts
@@ -1,75 +1,83 @@
 import { cva } from "class-variance-authority";
 
 const backdrop = cva([
-  "fixed",
-  "bg-black",
-  "bg-opacity-50",
-  "inset-0",
-  "overflow-y-auto",
-  "flex",
-  "justify-center",
-  "w-full",
-  "h-full",
-  "p-12",
+  "zn-fixed",
+  "zn-bg-black",
+  "zn-bg-opacity-50",
+  "zn-inset-0",
+  "zn-overflow-y-auto",
+  "zn-flex",
+  "zn-justify-center",
+  "zn-w-full",
+  "zn-h-full",
+  "zn-p-12",
   // "backdrop-blur-sm",
 ]);
 const container = cva(
   [
-    "m-auto",
-    "bg-color-component-background",
-    "min-w-[350px] max-w-[90%]",
-    "h-fit",
-    "rounded-base",
-    "relative",
+    "zn-m-auto",
+    "zn-bg-color-component-background",
+    "zn-min-w-[350px] max-w-[90%]",
+    "zn-h-fit",
+    "zn-rounded-base",
+    "zn-relative",
   ],
   {
     variants: {
       isCentered: {
         true: [""],
-        false: ["mt-28"],
+        false: ["zn-mt-28"],
       },
     },
   }
 );
-const close = cva(["absolute", "right-4", "top-4", "text-neutral-50"]);
-const header = cva(["px-6", "pt-6"]);
-const titleContainer = cva(["flex", "gap-2"]);
-const titleIcon = cva(["mt-1"], {
+const close = cva([
+  "zn-absolute",
+  "zn-right-4",
+  "zn-top-4",
+  "zn-text-neutral-50",
+]);
+const header = cva(["zn-px-6", "zn-pt-6"]);
+const titleContainer = cva(["zn-flex", "zn-gap-2"]);
+const titleIcon = cva(["zn-mt-1"], {
   variants: {
     variant: {
-      success: ["text-success-base"],
-      error: ["text-error-base"],
-      warning: ["text-warning-base"],
-      info: ["text-info-base"],
+      success: ["zn-text-success-base"],
+      error: ["zn-text-error-base"],
+      warning: ["zn-text-warning-base"],
+      info: ["zn-text-info-base"],
     },
   },
 });
-const title = cva(["text-xl", "font-bold"]);
-const content = cva(["px-6", "pb-6"], {
+const title = cva(["zn-text-xl", "zn-font-bold"]);
+const content = cva(["zn-px-6", "zn-pb-6"], {
   variants: {
     showHeader: {
-      true: ["pt-3"],
-      false: ["pt-6"],
+      true: ["zn-pt-3"],
+      false: ["zn-pt-6"],
     },
   },
 });
-const footer = cva(["px-6", "pb-6", "flex", "justify-end", "gap-3"], {
-  variants: {
-    variant: {
-      success: [],
-      error: [],
-      warning: [],
-      info: [],
+const footer = cva(
+  ["zn-px-6", "zn-pb-6", "zn-flex", "zn-justify-end", "zn-gap-3"],
+  {
+    variants: {
+      variant: {
+        success: [],
+        error: [],
+        warning: [],
+        info: [],
+      },
     },
-  },
-});
+  }
+);
 const okButton = cva([], {
   variants: {
     variant: {
-      success: ["bg-success-base"],
-      error: ["bg-error-base"],
-      warning: ["bg-warning-base"],
-      info: ["bg-info-base"],
+      success: ["zn-bg-success-base"],
+      error: ["zn-bg-error-base"],
+      warning: ["zn-bg-warning-base"],
+      info: ["zn-bg-info-base"],
     },
   },
 });
diff --git a/lib/customization/styles/components/number-input.styles.ts b/lib/customization/styles/components/number-input.styles.ts
index 328e23d..58f17c3 100644
--- a/lib/customization/styles/components/number-input.styles.ts
+++ b/lib/customization/styles/components/number-input.styles.ts
@@ -2,71 +2,71 @@ import { cva } from "class-variance-authority";
 
 const container = cva(
   [
-    "rounded-base",
-    "text-neutral-100",
-    "w-full",
-    "h-full",
-    "outline",
-    "outline-1",
-    "outline-transparent",
-    "flex",
-    "justify-between",
-    "items-center",
-    "overflow-hidden",
+    "zn-rounded-base",
+    "zn-text-neutral-100",
+    "zn-w-full",
+    "zn-h-full",
+    "zn-outline",
+    "zn-outline-1",
+    "zn-outline-transparent",
+    "zn-flex",
+    "zn-justify-between",
+    "zn-items-center",
+    "zn-overflow-hidden",
   ],
   {
     variants: {
       size: {
-        xs: ["h-6"],
-        sm: ["h-8"],
-        md: ["h-10"],
-        lg: ["h-12"],
+        xs: ["zn-h-6"],
+        sm: ["zn-h-8"],
+        md: ["zn-h-10"],
+        lg: ["zn-h-12"],
       },
       variant: {
         outline: [
-          "border",
-          "border-base",
+          "zn-border",
+          "zn-border-base",
 
-          "hover:!border-primary-base",
+          "hover:!zn-border-primary-base",
 
-          "focus-within:!border-primary-base",
-          "focus-within:!outline-primary-20",
-          "focus-within:!outline-2",
+          "focus-within:!zn-border-primary-base",
+          "focus-within:!zn-outline-primary-20",
+          "focus-within:!zn-outline-2",
 
-          "focus-within:!ring-2",
-          "focus-within:!ring-primary-20",
+          "focus-within:!zn-ring-2",
+          "focus-within:!zn-ring-primary-20",
         ],
         filled: [
-          "bg-primary-10",
+          "zn-bg-primary-10",
 
-          "border",
-          "border-primary-10",
+          "zn-border",
+          "zn-border-primary-10",
 
-          "hover:!border-primary-base",
+          "hover:!zn-border-primary-base",
 
-          "focus-within:!border-primary-base",
-          "focus-within:!outline-primary-20",
-          "focus-within:!outline-2",
-          "focus-within:!bg-transparent",
+          "focus-within:!zn-border-primary-base",
+          "focus-within:!zn-outline-primary-20",
+          "focus-within:!zn-outline-2",
+          "focus-within:!zn-bg-transparent",
 
-          "focus-within:!ring-2",
-          "focus-within:!ring-primary-20",
+          "focus-within:!zn-ring-2",
+          "focus-within:!zn-ring-primary-20",
         ],
         flushed: [
-          "!rounded-none",
+          "!zn-rounded-none",
 
-          "border-b",
-          "border-b-primary-base",
+          "zn-border-b",
+          "zn-border-b-primary-base",
 
-          "hover:shadow-[0_1px_0_0_var(--color-primary)]",
-          "focus-within:!shadow-[0_1px_0_0_var(--color-primary)]",
-          "focus-within:!border-b-primary-base",
+          "hover:zn-shadow-[0_1px_0_0_var(--color-primary)]",
+          "focus-within:!zn-shadow-[0_1px_0_0_var(--color-primary)]",
+          "focus-within:!zn-border-b-primary-base",
 
-          "!px-0",
+          "!zn-px-0",
         ],
       },
       isDisabled: {
-        true: ["!bg-neutral-10", "cursor-not-allowed"],
+        true: ["!zn-bg-neutral-10", "zn-cursor-not-allowed"],
         false: [],
       },
     },
@@ -75,33 +75,33 @@ const container = cva(
 
 const input = cva(
   [
-    "rounded-md",
-    "w-full",
-    "h-full",
-    "!bg-transparent",
-    "outline-none",
-    "placeholder:text-neutral-40",
+    "zn-rounded-md",
+    "zn-w-full",
+    "zn-h-full",
+    "!zn-bg-transparent",
+    "zn-outline-none",
+    "placeholder:zn-text-neutral-40",
   ],
   {
     variants: {
       size: {
-        xs: ["px-2", "text-xs"],
-        sm: ["px-2", "text-sm"],
-        md: ["px-3", "text-sm"],
-        lg: ["px-3", "text-base"],
+        xs: ["zn-px-2", "zn-text-xs"],
+        sm: ["zn-px-2", "zn-text-sm"],
+        md: ["zn-px-3", "zn-text-sm"],
+        lg: ["zn-px-3", "zn-text-base"],
       },
       variant: {
         outline: [],
         filled: [],
-        flushed: ["!px-0"],
-        unstyled: ["!px-0"],
+        flushed: ["!zn-px-0"],
+        unstyled: ["!zn-px-0"],
       },
       isInGroup: {
-        true: ["!px-0"],
+        true: ["!zn-px-0"],
         false: [],
       },
       isDisabled: {
-        true: ["cursor-not-allowed"],
+        true: ["zn-cursor-not-allowed"],
         false: [],
       },
     },
@@ -109,25 +109,25 @@ const input = cva(
 );
 
 const arrowContainer = cva([
-  "flex",
-  "flex-col",
-  "border-l",
-  "border-l-base",
-  "justify-stretch",
-  "h-full",
+  "zn-flex",
+  "zn-flex-col",
+  "zn-border-l",
+  "zn-border-l-base",
+  "zn-justify-stretch",
+  "zn-h-full",
 ]);
 
 const arrow = cva([
-  "flex",
-  "justify-center",
-  "items-center",
-  "px-1.5",
-  "leading-none",
-  "hover:bg-primary-10",
-  "grow",
+  "zn-flex",
+  "zn-justify-center",
+  "zn-items-center",
+  "zn-px-1.5",
+  "zn-leading-none",
+  "hover:zn-bg-primary-10",
+  "zn-grow",
 ]);
 
-const arrowDivider = cva(["text-base", "w-full"]);
+const arrowDivider = cva(["zn-text-base", "zn-w-full"]);
 
 const numberInputStyles = {
   container,
diff --git a/lib/customization/styles/components/popover.styles.ts b/lib/customization/styles/components/popover.styles.ts
index 0375ba0..520634b 100644
--- a/lib/customization/styles/components/popover.styles.ts
+++ b/lib/customization/styles/components/popover.styles.ts
@@ -1,13 +1,13 @@
 import { cva } from "class-variance-authority";
 
 const base = cva([
-  "rounded-base",
-  "px-3",
-  "py-2",
-  "bg-color-component-background",
-  "text-neutral-100",
-  "text-sm",
-  "shadow-base",
+  "zn-rounded-base",
+  "zn-px-3",
+  "zn-py-2",
+  "zn-bg-color-component-background",
+  "zn-text-neutral-100",
+  "zn-text-sm",
+  "zn-shadow-base",
 ]);
 const arrow = cva([]);
 const popoverStyles = {
diff --git a/lib/customization/styles/components/radio.styles.ts b/lib/customization/styles/components/radio.styles.ts
index f8f77b4..03e5c86 100644
--- a/lib/customization/styles/components/radio.styles.ts
+++ b/lib/customization/styles/components/radio.styles.ts
@@ -1,11 +1,11 @@
 import { cva } from "class-variance-authority";
 
 const container = cva(
-  ["flex", "items-center", "w-fit", "gap-2", "select-none"],
+  ["zn-flex", "zn-items-center", "zn-w-fit", "zn-gap-2", "zn-select-none"],
   {
     variants: {
       isDisabled: {
-        true: ["cursor-not-allowed"],
+        true: ["zn-cursor-not-allowed"],
         false: [],
       },
     },
@@ -13,40 +13,40 @@ const container = cva(
 );
 const input = cva(
   [
-    "form-radio",
-    "checked:bg-primary-base",
-    "border-neutral-100",
-    "text-primary-base",
-    "focus:ring-2",
-    "focus:ring-primary-20",
-    "focus:!ring-offset-0",
-    "active:ring-2",
-    "active:ring-primary-20",
-    "active:!ring-offset-0",
+    "zn-form-radio",
+    "checked:zn-bg-primary-base",
+    "zn-border-neutral-100",
+    "zn-text-primary-base",
+    "focus:zn-ring-2",
+    "focus:zn-ring-primary-20",
+    "focus:!zn-ring-offset-0",
+    "active:zn-ring-2",
+    "active:zn-ring-primary-20",
+    "active:!zn-ring-offset-0",
   ],
   {
     variants: {
       size: {
-        sm: ["h-3", "w-3"],
-        md: ["h-4", "w-4"],
-        lg: ["h-5", "w-5"],
+        sm: ["zn-h-3", "zn-w-3"],
+        md: ["zn-h-4", "zn-w-4"],
+        lg: ["zn-h-5", "zn-w-5"],
       },
       indeterminate: {
         true: [],
         false: [],
       },
       readOnly: {
-        true: ["pointer-events-none"],
+        true: ["zn-pointer-events-none"],
       },
       isDisabled: {
         true: [
-          "cursor-not-allowed",
-          "checked:bg-neutral-20",
-          "bg-neutral-5",
-          "hover:bg-neutral-5",
-          "checked:hover:bg-neutral-20",
-          "active:ring-0",
-          "focus:ring-0",
+          "zn-cursor-not-allowed",
+          "checked:zn-bg-neutral-20",
+          "zn-bg-neutral-5",
+          "hover:zn-bg-neutral-5",
+          "checked:hover:zn-bg-neutral-20",
+          "active:zn-ring-0",
+          "focus:zn-ring-0",
         ],
         false: [],
       },
@@ -56,18 +56,18 @@ const input = cva(
     },
   }
 );
-const label = cva(["text-sm", "font-medium", "text-neutral-100"], {
+const label = cva(["zn-text-sm", "zn-font-medium", "zn-text-neutral-100"], {
   variants: {
     isDisabled: {
-      true: ["text-neutral-40"],
+      true: ["zn-text-neutral-40"],
     },
   },
 });
-const group = cva(["flex"], {
+const group = cva(["zn-flex"], {
   variants: {
     layout: {
-      vertical: ["flex-col", "gap-2"],
-      horizontal: ["flex-row", "gap-2-4", "gap-x-10"],
+      vertical: ["zn-flex-col", "zn-gap-2"],
+      horizontal: ["zn-flex-row", "zn-gap-2-4", "zn-gap-x-10"],
     },
   },
 });
diff --git a/lib/customization/styles/components/select.styles.ts b/lib/customization/styles/components/select.styles.ts
index bbba0f4..a0aedf9 100644
--- a/lib/customization/styles/components/select.styles.ts
+++ b/lib/customization/styles/components/select.styles.ts
@@ -2,87 +2,87 @@ import { cva } from "class-variance-authority";
 
 const container = cva(
   [
-    "rounded-base",
-    "text-neutral-100",
-    "w-fit",
-    "outline",
-    "outline-1",
-    "outline-transparent",
-    "w-full",
+    "zn-rounded-base",
+    "zn-text-neutral-100",
+    "zn-w-fit",
+    "zn-outline",
+    "zn-outline-1",
+    "zn-outline-transparent",
+    "zn-w-full",
   ],
   {
     variants: {
       size: {
-        xs: ["min-h-6"],
-        sm: ["min-h-8"],
-        md: ["min-h-10"],
-        lg: ["min-h-12"],
+        xs: ["zn-min-h-6"],
+        sm: ["zn-min-h-8"],
+        md: ["zn-min-h-10"],
+        lg: ["zn-min-h-12"],
       },
       variant: {
         outline: [
-          "border",
-          "border-base",
+          "zn-border",
+          "zn-border-base",
 
-          "hover:!border-primary-base",
+          "hover:!zn-border-primary-base",
 
-          "focus-within:!border-primary-base",
-          "focus-within:!outline-primary-20",
-          "focus-within:!outline-2",
+          "focus-within:!zn-border-primary-base",
+          "focus-within:!zn-outline-primary-20",
+          "focus-within:!zn-outline-2",
 
-          "focus-within:!ring-2",
-          "focus-within:!ring-primary-20",
+          "focus-within:!zn-ring-2",
+          "focus-within:!zn-ring-primary-20",
         ],
         filled: [
-          "bg-primary-10",
+          "zn-bg-primary-10",
 
-          "border",
-          "border-primary-10",
+          "zn-border",
+          "zn-border-primary-10",
 
-          "hover:!border-primary-base",
+          "hover:!zn-border-primary-base",
 
-          "focus-within:!border-primary-base",
-          "focus-within:!outline-primary-20",
-          "focus-within:!outline-2",
-          "focus-within:!bg-transparent",
+          "focus-within:!zn-border-primary-base",
+          "focus-within:!zn-outline-primary-20",
+          "focus-within:!zn-outline-2",
+          "focus-within:!zn-bg-transparent",
 
-          "focus-within:!ring-2",
-          "focus-within:!ring-primary-20",
+          "focus-within:!zn-ring-2",
+          "focus-within:!zn-ring-primary-20",
         ],
         flushed: [
-          "!rounded-none",
+          "!zn-rounded-none",
 
-          "border-b",
-          "border-b-primary-base",
+          "zn-border-b",
+          "zn-border-b-primary-base",
 
-          "hover:shadow-[0_1px_0_0_var(--color-primary)]",
-          "focus-within:!shadow-[0_1px_0_0_var(--color-primary)]",
-          "focus-within:!border-b-primary-base",
+          "hover:zn-shadow-[0_1px_0_0_var(--color-primary)]",
+          "focus-within:!zn-shadow-[0_1px_0_0_var(--color-primary)]",
+          "focus-within:!zn-border-b-primary-base",
 
-          "!px-0",
+          "!zn-px-0",
         ],
       },
       isDisabled: {
-        true: ["!bg-neutral-10", "cursor-not-allowed"],
+        true: ["!zn-bg-neutral-10", "zn-cursor-not-allowed"],
         false: [],
       },
     },
   }
 );
 const secContainer = cva(
-  ["w-full", "min-h-inherit", "h-full", "flex", "items-center"],
+  ["zn-w-full", "zn-min-h-inherit", "zn-h-full", "zn-flex", "zn-items-center"],
   {
     variants: {
       addonRight: {
-        true: ["pl-4", "pr-2.5"],
+        true: ["zn-pl-4", "zn-pr-2.5"],
         false: [],
       },
       addonLeft: {
-        true: ["pr-4"],
+        true: ["zn-pr-4"],
         false: [],
       },
       isSearchable: {
-        true: ["cursor-text"],
-        false: ["cursor-pointer"],
+        true: ["zn-cursor-text"],
+        false: ["zn-cursor-pointer"],
       },
       isMultiple: {
         true: [],
@@ -93,43 +93,43 @@ const secContainer = cva(
       {
         addonLeft: true,
         addonRight: true,
-        class: "!px-0",
+        class: "!zn-px-0",
       },
     ],
   }
 );
 const inputGroup = cva(
   [
-    "w-full",
-    "min-h-inherit",
-    "h-full",
-    "!bg-transparent",
-    "outline-none",
-    "flex",
-    "items-center",
-    // "cursor-pointer",
-    "truncate",
-    "relative",
+    "zn-w-full",
+    "zn-min-h-inherit",
+    "zn-h-full",
+    "!zn-bg-transparent",
+    "zn-outline-none",
+    "zn-flex",
+    "zn-items-center",
+    // "zn-cursor-pointer",
+    "zn-truncate",
+    "zn-relative",
   ],
   {
     variants: {
       size: {
-        xs: ["px-4", "text-xs"],
-        sm: ["px-4", "text-sm"],
-        md: ["px-4", "text-sm"],
-        lg: ["px-4", "text-base"],
+        xs: ["zn-px-4", "zn-text-xs"],
+        sm: ["zn-px-4", "zn-text-sm"],
+        md: ["zn-px-4", "zn-text-sm"],
+        lg: ["zn-px-4", "zn-text-base"],
       },
       variant: {
         outline: [],
         filled: [],
-        flushed: ["!px-0"],
+        flushed: ["!zn-px-0"],
       },
       isInGroup: {
-        true: ["!px-0"],
+        true: ["!zn-px-0"],
         false: [],
       },
       isDisabled: {
-        true: ["cursor-not-allowed"],
+        true: ["zn-cursor-not-allowed"],
         false: [],
       },
     },
@@ -143,140 +143,145 @@ const inputGroup = cva(
 
 const input = cva(
   [
-    "outline-none",
-    "border-none",
-    "p-0",
-    "m-0",
-    "min-w-[2px]",
-    "min-h-inherit",
-    "h-full",
-    "appearance-none",
-    "cursor-inherit",
+    "zn-outline-none",
+    "zn-border-none",
+    "zn-p-0",
+    "zn-m-0",
+    "zn-min-w-[2px]",
+    "zn-min-h-inherit",
+    "zn-h-full",
+    "zn-appearance-none",
+    "zn-cursor-inherit",
   ],
   {
     variants: {
       isMultiple: {
-        true: ["ml-0.5"],
-        false: ["absolute", "top-0", "bottom-0"],
+        true: ["zn-ml-0.5"],
+        false: ["zn-absolute", "zn-top-0", "zn-bottom-0"],
       },
     },
   }
 );
 
 const dropdown = cva([
-  "overflow-y-auto",
-  "rounded-base",
-  "px-1",
-  "py-0.5",
-  "bg-color-component-background",
-  "text-neutral-100",
-  "text-base",
-  "shadow-base",
-  "overflow-x-hidden",
-  "w-[270px]",
+  "zn-overflow-y-auto",
+  "zn-rounded-base",
+  "zn-px-1",
+  "zn-py-0.5",
+  "zn-bg-color-component-background",
+  "zn-text-neutral-100",
+  "zn-text-base",
+  "zn-shadow-base",
+  "zn-overflow-x-hidden",
+  "zn-w-[270px]",
 ]);
 const option = cva(
   [
-    "w-full",
-    "flex",
-    "items-center",
-    "justify-between",
-    "gap-4",
-    "px-3",
-    "py-1.5",
-    "my-0.5",
-    "rounded-base",
-    "hover:bg-neutral-10",
-    "cursor-pointer",
-    "font-medium",
-    "text-base",
+    "zn-w-full",
+    "zn-flex",
+    "zn-items-center",
+    "zn-justify-between",
+    "zn-gap-4",
+    "zn-px-3",
+    "zn-py-1.5",
+    "zn-my-0.5",
+    "zn-rounded-base",
+    "hover:zn-bg-neutral-10",
+    "zn-cursor-pointer",
+    "zn-font-medium",
+    "zn-text-base",
   ],
   {
     variants: {
       isSelected: {
-        true: ["font-medium", "bg-primary-10"],
+        true: ["zn-font-medium", "zn-bg-primary-10"],
         false: [],
       },
       isDisabled: {
-        true: ["cursor-not-allowed", "text-neutral-40"],
+        true: ["zn-cursor-not-allowed", "zn-text-neutral-40"],
         false: [],
       },
     },
   }
 );
-const optionLabelContainer = cva(["flex", "gap-x-4", "items-center", "w-full"]);
-const optionLabel = cva(["truncate", "inline-block"]);
-const optionCheckIcon = cva(["text-primary-base", "text-[18px]"]);
-const group = cva(["flex", "items-center"]);
-const inputLabel = cva(["truncate", "inline-block", "w-full"]);
+const optionLabelContainer = cva([
+  "zn-flex",
+  "zn-gap-x-4",
+  "zn-items-center",
+  "zn-w-full",
+]);
+const optionLabel = cva(["zn-truncate", "zn-inline-block"]);
+const optionCheckIcon = cva(["zn-text-primary-base", "zn-text-[18px]"]);
+const group = cva(["zn-flex", "zn-items-center"]);
+const inputLabel = cva(["zn-truncate", "zn-inline-block", "zn-w-full"]);
 const placeholder = cva([
-  "text-neutral-40",
-  "text-black",
-  "inline-block",
-  "w-full",
+  "zn-text-neutral-40",
+  "zn-text-black",
+  "zn-inline-block",
+  "zn-w-full",
 ]);
 const leftElement = cva([
-  "flex",
-  "items-center",
-  "justify-center",
-  "cursor-pointer",
-  "p-1.5",
+  "zn-flex",
+  "zn-items-center",
+  "zn-justify-center",
+  "zn-cursor-pointer",
+  "zn-p-1.5",
 ]);
 const rightElement = cva([
-  "flex",
-  "items-center",
-  "justify-center",
-  "cursor-pointer",
-  "p-1.5",
+  "zn-flex",
+  "zn-items-center",
+  "zn-justify-center",
+  "zn-cursor-pointer",
+  "zn-p-1.5",
 ]);
 const clearElement = cva([
-  "flex",
-  "items-center",
-  "justify-center",
-  "p-1.5",
-  "hover:cursor-pointer",
-  "hover:bg-gray-100",
-  "hover:rounded-lg",
+  "zn-flex",
+  "zn-items-center",
+  "zn-justify-center",
+  "zn-p-1.5",
+  "hover:zn-cursor-pointer",
+  "hover:zn-bg-gray-100",
+  "hover:zn-rounded-lg",
 ]);
 const empty = cva([
-  "p-6",
-  "flex",
-  "justify-center",
-  "items-center",
-  "text-neutral-40",
+  "zn-p-6",
+  "zn-flex",
+  "zn-justify-center",
+  "zn-items-center",
+  "zn-text-neutral-40",
 ]);
 const tagContainer = cva([
-  "flex",
-  "items-center",
-  "gap-x-1",
-  "gap-y-1",
-  "flex-wrap",
-  "py-1",
+  "zn-flex",
+  "zn-items-center",
+  "zn-gap-x-1",
+  "zn-gap-y-1",
+  "zn-flex-wrap",
+  "zn-py-1",
 ]);
 const tag = cva(
   [
-    "rounded-3xl",
-    "px-3",
-    "py-1.5",
-    "font-medium",
-    "flex",
-    "items-center",
-    "text-xs",
-    "gap-2",
-    "leading-none",
+    "zn-rounded-3xl",
+    "zn-px-3",
+    "zn-py-1.5",
+    "zn-font-medium",
+    "zn-flex",
+    "zn-items-center",
+    "zn-text-xs",
+    "zn-gap-2",
+    "zn-leading-none",
   ],
   {
     variants: {
       variant: {
-        outline: ["bg-primary-10"],
-        filled: ["bg-neutral-5"],
-        flushed: ["bg-primary-10"],
+        outline: ["zn-bg-primary-10"],
+        filled: ["zn-bg-neutral-5"],
+        flushed: ["zn-bg-primary-10"],
       },
     },
   }
 );
-const tagX = cva(["cursor-pointer"]);
-const iconColor = cva(["text-neutral-50"]);
+const tagX = cva(["zn-cursor-pointer"]);
+const iconColor = cva(["zn-text-neutral-50"]);
 const selectStyles = {
   container,
   secContainer,
diff --git a/lib/customization/styles/components/spinner.styles.ts b/lib/customization/styles/components/spinner.styles.ts
index 16c5ccb..d7df1b0 100644
--- a/lib/customization/styles/components/spinner.styles.ts
+++ b/lib/customization/styles/components/spinner.styles.ts
@@ -1,31 +1,31 @@
 import { cva } from "class-variance-authority";
 
 // JUST ICON
-const spinner = cva(["animate-spin", "!opacity-100"], {
+const spinner = cva(["zn-animate-spin", "!zn-opacity-100"], {
   variants: {
     size: {
-      xs: ["w-[8px]", "h-[8px]"],
-      sm: ["w-[16px]", "h-[16px]"],
-      md: ["w-[24px]", "h-[24px]"],
-      lg: ["w-[48px]", "h-[48px]"],
+      xs: ["zn-w-[8px]", "zn-h-[8px]"],
+      sm: ["zn-w-[16px]", "zn-h-[16px]"],
+      md: ["zn-w-[24px]", "zn-h-[24px]"],
+      lg: ["zn-w-[48px]", "zn-h-[48px]"],
     },
   },
 });
 
 // OVERLAY
-const container = cva(["relative", "block", "w-full", "h-full"]);
+const container = cva(["zn-relative", "zn-block", "zn-w-full", "zn-h-full"]);
 const overlay = cva([
-  "absolute",
-  "inset-0",
-  "w-full",
-  "h-full",
-  "flex",
-  "justify-center",
-  "items-center",
-  "flex-col",
-  "gap-2",
+  "zn-absolute",
+  "zn-inset-0",
+  "zn-w-full",
+  "zn-h-full",
+  "zn-flex",
+  "zn-justify-center",
+  "zn-items-center",
+  "zn-flex-col",
+  "zn-gap-2",
 ]);
-const description = cva(["text-neutral-100", "text-sm"]);
+const description = cva(["zn-text-neutral-100", "zn-text-sm"]);
 const spinnerStyles = {
   spinner,
   container,
diff --git a/lib/customization/styles/components/switch.styles.ts b/lib/customization/styles/components/switch.styles.ts
index a4080d0..8e91397 100644
--- a/lib/customization/styles/components/switch.styles.ts
+++ b/lib/customization/styles/components/switch.styles.ts
@@ -1,11 +1,11 @@
 import { cva } from "class-variance-authority";
 
 const base = cva(
-  ["relative", "inline-flex", "items-center", "cursor-pointer"],
+  ["zn-relative", "zn-inline-flex", "zn-items-center", "zn-cursor-pointer"],
   {
     variants: {
       isDisabled: {
-        true: ["cursor-not-allowed"],
+        true: ["zn-cursor-not-allowed"],
         false: [],
       },
       isReadOnly: {
@@ -15,10 +15,10 @@ const base = cva(
     },
   }
 );
-const input = cva(["sr-only", "peer"], {
+const input = cva(["zn-sr-only", "zn-peer"], {
   variants: {
     isDisabled: {
-      true: ["cursor-not-allowed"],
+      true: ["zn-cursor-not-allowed"],
       false: [],
     },
     isReadOnly: {
@@ -29,62 +29,62 @@ const input = cva(["sr-only", "peer"], {
 });
 const span = cva(
   [
-    "bg-primary-10",
-    "peer-focus:outline-none",
-    "rounded-full",
-    "focus:ring-2",
-    "focus:ring-primary-20",
-    "active:ring-2",
-    "active:ring-primary-20",
+    "zn-bg-primary-10",
+    "peer-focus:zn-outline-none",
+    "zn-rounded-full",
+    "focus:zn-ring-2",
+    "focus:zn-ring-primary-20",
+    "active:zn-ring-2",
+    "active:zn-ring-primary-20",
     "peer",
-    "peer-checked:after:translate-x-full",
-    "peer-checked:after:border-none",
-    "after:content-['']",
-    "after:absolute",
-    "after:bg-white",
-    "after:rounded-full",
-    "after:hover:bg-primary-20",
-    "after:transition-all",
-    "peer-checked:bg-primary-base",
-    "peer-checked:hover:bg-primary-50",
-    "peer-checked:after:hover:bg-white",
+    "peer-checked:after:zn-translate-x-full",
+    "peer-checked:after:zn-border-none",
+    "after:zn-content-['']",
+    "after:zn-absolute",
+    "after:zn-bg-white",
+    "after:zn-rounded-full",
+    "after:hover:zn-bg-primary-20",
+    "after:zn-transition-all",
+    "peer-checked:zn-bg-primary-base",
+    "peer-checked:hover:zn-bg-primary-50",
+    "peer-checked:after:hover:zn-bg-white",
   ],
   {
     variants: {
       size: {
         sm: [
-          "w-[35px]",
-          "h-5",
-          "after:top-[2.5px]",
-          "after:start-[3px]",
-          "after:h-[14px]",
-          "after:w-[14px]",
+          "zn-w-[35px]",
+          "zn-h-5",
+          "after:zn-top-[2.5px]",
+          "after:zn-start-[3px]",
+          "after:zn-h-[14px]",
+          "after:zn-w-[14px]",
         ],
         md: [
-          "w-[44px]",
-          "h-6",
-          "after:top-[3px]",
-          "after:start-[4px]",
-          "after:h-[18px]",
-          "after:w-[18px]",
+          "zn-w-[44px]",
+          "zn-h-6",
+          "after:zn-top-[3px]",
+          "after:zn-start-[4px]",
+          "after:zn-h-[18px]",
+          "after:zn-w-[18px]",
         ],
         lg: [
-          "w-[52px]",
-          "h-7",
-          "after:top-[3px]",
-          "after:start-[4px]",
-          "after:h-[22px]",
-          "after:w-[22px]",
+          "zn-w-[52px]",
+          "zn-h-7",
+          "after:zn-top-[3px]",
+          "after:zn-start-[4px]",
+          "after:zn-h-[22px]",
+          "after:zn-w-[22px]",
         ],
       },
       isDisabled: {
         true: [
-          "cursor-not-allowed",
-          "bg-neutral-10",
-          "peer-checked:bg-neutral-10",
-          "peer-checked:hover:bg-neutral-10",
-          "after:hover:bg-white",
-          "after:bg-white",
+          "zn-cursor-not-allowed",
+          "zn-bg-neutral-10",
+          "peer-checked:zn-bg-neutral-10",
+          "peer-checked:hover:zn-bg-neutral-10",
+          "after:hover:zn-bg-white",
+          "after:zn-bg-white",
         ],
         false: [],
       },
diff --git a/lib/customization/styles/components/table.styles.ts b/lib/customization/styles/components/table.styles.ts
index 9342252..454055f 100644
--- a/lib/customization/styles/components/table.styles.ts
+++ b/lib/customization/styles/components/table.styles.ts
@@ -3,25 +3,30 @@ import { cva } from "class-variance-authority";
 const tableBorder = cva([], {
   variants: {
     isBordered: {
-      true: ["border", "border-base", "border-collapse"],
+      true: ["zn-border", "zn-border-base", "zn-border-collapse"],
       false: [],
     },
   },
 });
 
-const base = cva(["w-full"]);
-const row = cva(["hover:bg-gray-100"]);
-const cell = cva(["text-left"], {
+const base = cva(["zn-w-full"]);
+const row = cva(["hover:zn-bg-gray-100"]);
+const cell = cva(["zn-text-left"], {
   variants: {
     size: {
-      sm: ["px-2", "py-1"],
-      md: ["px-4", "py-2"],
-      lg: ["px-4", "py-4"],
+      sm: ["zn-px-2", "zn-py-1"],
+      md: ["zn-px-4", "zn-py-2"],
+      lg: ["zn-px-4", "zn-py-4"],
     },
   },
 });
-const th = cva(["uppercase", "text-sm", "font-semibold", "text-neutral-100"]);
-const td = cva(["text-sm"]);
+const th = cva([
+  "zn-uppercase",
+  "zn-text-sm",
+  "zn-font-semibold",
+  "zn-text-neutral-100",
+]);
+const td = cva(["zn-text-sm"]);
 const tableStyles = {
   base,
   row,
diff --git a/lib/customization/styles/components/tabs.styles.ts b/lib/customization/styles/components/tabs.styles.ts
index 52ee8ac..df42a63 100644
--- a/lib/customization/styles/components/tabs.styles.ts
+++ b/lib/customization/styles/components/tabs.styles.ts
@@ -1,53 +1,53 @@
 import { cva } from "class-variance-authority";
 
-const container = cva(["block"]);
-const nav = cva(["block"], {
+const container = cva(["zn-block"]);
+const nav = cva(["zn-block"], {
   variants: {
     variant: {
-      underline: ["border-b", "border-b-base"],
+      underline: ["zn-border-b", "zn-border-b-base"],
       solid: [],
       outline: [],
     },
   },
 });
-const ul = cva(["flex", "w-full", "list-none", "p-0", "m-0"], {
+const ul = cva(["zn-flex", "zn-w-full", "zn-list-none", "zn-p-0", "zn-m-0"], {
   variants: {
     variant: {
-      underline: ["gap-8"],
-      solid: ["gap-3"],
-      outline: ["gap-3"],
+      underline: ["zn-gap-8"],
+      solid: ["zn-gap-3"],
+      outline: ["zn-gap-3"],
     },
   },
 });
 const li = cva(
   [
-    "flex",
-    "items-center",
-    "justify-start",
-    "gap-3",
-    "rounded-base",
-    "py-2",
-    "relative",
-    "cursor-pointer",
-    "text-sm",
+    "zn-flex",
+    "zn-items-center",
+    "zn-justify-start",
+    "zn-gap-3",
+    "zn-rounded-base",
+    "zn-py-2",
+    "zn-relative",
+    "zn-cursor-pointer",
+    "zn-text-sm",
   ],
   {
     variants: {
       variant: {
         underline: [],
-        solid: ["px-6", "border", "border-transparent"],
-        outline: ["px-6", "border", "border-transparent"],
+        solid: ["zn-px-6", "zn-border", "zn-border-transparent"],
+        outline: ["zn-px-6", "zn-border", "zn-border-transparent"],
       },
       isSelected: {
         true: [],
         false: [],
       },
       isFitted: {
-        true: ["w-full", "justify-center"],
+        true: ["zn-w-full", "zn-justify-center"],
         false: [],
       },
       isDisabled: {
-        true: ["!cursor-not-allowed", "!text-gray-400"],
+        true: ["!zn-cursor-not-allowed", "!zn-text-gray-400"],
         false: [],
       },
     },
@@ -55,31 +55,31 @@ const li = cva(
       {
         variant: "underline",
         isSelected: true,
-        class: "text-primary-base",
+        class: "zn-text-primary-base",
       },
       {
         variant: "solid",
         isSelected: true,
-        class: ["bg-primary-base", "text-white"],
+        class: ["zn-bg-primary-base", "zn-text-white"],
       },
       {
         variant: "outline",
         isSelected: true,
-        class: ["border-primary-base", "text-primary-base"],
+        class: ["zn-border-primary-base", "zn-text-primary-base"],
       },
     ],
   }
 );
 const indicator = cva([
-  "absolute",
-  "bottom-[-1px]",
-  "left-0",
-  "right-0",
-  "w-full",
-  "h-[1.5px]",
-  "bg-primary-base",
+  "zn-absolute",
+  "zn-bottom-[-1px]",
+  "zn-left-0",
+  "zn-right-0",
+  "zn-w-full",
+  "zn-h-[1.5px]",
+  "zn-bg-primary-base",
 ]);
-const content = cva(["block", "py-4"]);
+const content = cva(["zn-block", "zn-py-4"]);
 const tabsStyles = {
   container,
   nav,
diff --git a/lib/customization/styles/components/text.styles.ts b/lib/customization/styles/components/text.styles.ts
index d876583..54ac301 100644
--- a/lib/customization/styles/components/text.styles.ts
+++ b/lib/customization/styles/components/text.styles.ts
@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 
-const base = cva(["text-neutral-100"]);
+const base = cva(["zn-text-neutral-100"]);
 
 const textStyles = {
   base,
diff --git a/lib/customization/styles/components/textarea.styles.ts b/lib/customization/styles/components/textarea.styles.ts
index 9194264..ec3c0b8 100644
--- a/lib/customization/styles/components/textarea.styles.ts
+++ b/lib/customization/styles/components/textarea.styles.ts
@@ -2,70 +2,70 @@ import { cva } from "class-variance-authority";
 
 const base = cva(
   [
-    "block",
-    "rounded-base",
-    "text-neutral-100",
-    "w-fit",
-    "outline",
-    "outline-1",
-    "outline-transparent",
-    "w-full",
-    "px-4",
-    "py-3",
-    "text-sm",
+    "zn-block",
+    "zn-rounded-base",
+    "zn-text-neutral-100",
+    "zn-w-fit",
+    "zn-outline",
+    "zn-outline-1",
+    "zn-outline-transparent",
+    "zn-w-full",
+    "zn-px-4",
+    "zn-py-3",
+    "zn-text-sm",
   ],
   {
     variants: {
       variant: {
         outline: [
-          "border",
-          "border-base",
+          "zn-border",
+          "zn-border-base",
 
-          "hover:!border-primary-base",
+          "hover:!zn-border-primary-base",
 
-          "focus-within:!border-primary-base",
-          "focus-within:!outline-primary-20",
-          "focus-within:!outline-2",
+          "focus-within:!zn-border-primary-base",
+          "focus-within:!zn-outline-primary-20",
+          "focus-within:!zn-outline-2",
 
-          "focus-within:!ring-2",
-          "focus-within:!ring-primary-20",
+          "focus-within:!zn-ring-2",
+          "focus-within:!zn-ring-primary-20",
         ],
         filled: [
-          "bg-primary-10",
+          "zn-bg-primary-10",
 
-          "border",
-          "border-primary-10",
+          "zn-border",
+          "zn-border-primary-10",
 
-          "hover:!border-primary-base",
+          "hover:!zn-border-primary-base",
 
-          "focus-within:!border-primary-base",
-          "focus-within:!outline-primary-20",
-          "focus-within:!outline-2",
-          "focus-within:!bg-transparent",
+          "focus-within:!zn-border-primary-base",
+          "focus-within:!zn-outline-primary-20",
+          "focus-within:!zn-outline-2",
+          "focus-within:!zn-bg-transparent",
 
-          "focus-within:!ring-2",
-          "focus-within:!ring-primary-20",
+          "focus-within:!zn-ring-2",
+          "focus-within:!zn-ring-primary-20",
         ],
         flushed: [
-          "!rounded-none",
+          "!zn-rounded-none",
 
-          "border-b",
-          "border-b-primary-base",
+          "zn-border-b",
+          "zn-border-b-primary-base",
 
-          "hover:shadow-[0_1px_0_0_var(--color-primary)]",
-          "focus-within:!shadow-[0_1px_0_0_var(--color-primary)]",
-          "focus-within:!border-b-primary-base",
+          "hover:zn-shadow-[0_1px_0_0_var(--color-primary)]",
+          "focus-within:!zn-shadow-[0_1px_0_0_var(--color-primary)]",
+          "focus-within:!zn-border-b-primary-base",
 
-          "!px-0",
+          "!zn-px-0",
         ],
       },
       isDisabled: {
-        true: ["!bg-neutral-10", "cursor-not-allowed"],
+        true: ["!zn-bg-neutral-10", "zn-cursor-not-allowed"],
         false: [],
       },
       isResizable: {
-        true: ["resize-y"],
-        false: ["resize-none"],
+        true: ["zn-resize-y"],
+        false: ["zn-resize-none"],
       },
     },
   }
diff --git a/lib/customization/styles/components/toast.styles.ts b/lib/customization/styles/components/toast.styles.ts
index 3f49fc9..5a8c819 100644
--- a/lib/customization/styles/components/toast.styles.ts
+++ b/lib/customization/styles/components/toast.styles.ts
@@ -1,7 +1,14 @@
 import { cva } from "class-variance-authority";
 
 const toastsContainer = cva(
-  ["fixed", "z-[9999]", "pointer-events-none", "flex", "flex-col", "m-2"],
+  [
+    "zn-fixed",
+    "zn-z-[9999]",
+    "zn-pointer-events-none",
+    "zn-flex",
+    "zn-flex-col",
+    "zn-m-2",
+  ],
   {
     variants: {
       top: {
@@ -21,30 +28,30 @@ const toastsContainer = cva(
         false: [],
       },
       isTopOrBottom: {
-        true: ["mx-auto"],
+        true: ["zn-mx-auto"],
         false: [],
       },
     },
   }
 );
-const alertContainer = cva(["flex", "flex-col", "items-center"], {
+const alertContainer = cva(["zn-flex", "zn-flex-col", "zn-items-center"], {
   variants: {
     isRighty: {
-      true: ["items-end"],
+      true: ["zn-items-end"],
       false: [],
     },
     isLefty: {
-      true: ["items-start"],
+      true: ["zn-items-start"],
       false: [],
     },
   },
 });
 const alert = cva([
-  "min-w-[250px]",
-  "max-w-[500px]",
-  "rounded-base",
-  "overflow-hidden",
-  "shadow-base",
+  "zn-min-w-[250px]",
+  "zn-max-w-[500px]",
+  "zn-rounded-base",
+  "zn-overflow-hidden",
+  "zn-shadow-base",
 ]);
 
 const toastStyles = {
diff --git a/lib/customization/styles/components/tooltip.styles.ts b/lib/customization/styles/components/tooltip.styles.ts
index 2162d92..57d7b9f 100644
--- a/lib/customization/styles/components/tooltip.styles.ts
+++ b/lib/customization/styles/components/tooltip.styles.ts
@@ -1,13 +1,13 @@
 import { cva } from "class-variance-authority";
 
 const base = cva([
-  "bg-black",
-  "text-white",
-  "rounded-base",
-  "px-3",
-  "py-2",
-  "text-sm",
-  "shadow-base",
+  "zn-bg-black",
+  "zn-text-white",
+  "zn-rounded-base",
+  "zn-px-3",
+  "zn-py-2",
+  "zn-text-sm",
+  "zn-shadow-base",
 ]);
 
 const arrow = cva([]);
diff --git a/package.json b/package.json
index e4ebef4..ae303e1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "zeni-ui",
   "private": false,
-  "version": "1.2.7-beta",
+  "version": "1.2.8-beta",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
diff --git a/src/App.tsx b/src/App.tsx
index 6de7777..5cad134 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -51,8 +51,8 @@ function App() {
   // ];
 
   return (
-    <Center className="bg-color-primary-base-background min-h-screen">
-      <Box className="flex justify-center flex-col items-center h-full gap-4">
+    <Center className="zn-bg-color-primary-base-background zn-min-h-screen">
+      <Box className="zn-flex zn-justify-center zn-flex-col zn-items-center zn-h-full zn-gap-4">
         {/* <Flex className="card">
           {items.map((x) => (
             <Button
@@ -68,7 +68,7 @@ function App() {
             </Button>
           ))}
         </Flex>
-        <Text className="text-color-primary-base">
+        <Text className="zn-text-color-primary-base">
           This is a button. Its color is based on the theme
         </Text>
         <Popover content="Popover content" placement="bottom-start">
diff --git a/tailwind.config.js b/tailwind.config.js
index 5b18347..70aaba0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  prefix: "zn-",
   darkMode: ["class", '[data-mode="dark"]'],
   content: [
     "./index.html",
@@ -118,7 +119,7 @@ export default {
   plugins: [
     require("@tailwindcss/forms")({
       // strategy: 'base', // only generate global styles
-      strategy: 'class', // only generate classes
+      strategy: "class", // only generate classes
     }),
   ],
 };