diff --git a/apps/docs/src/stories/HelperText.stories.tsx b/apps/docs/src/stories/HelperText.stories.tsx
new file mode 100644
index 0000000..1672e8d
--- /dev/null
+++ b/apps/docs/src/stories/HelperText.stories.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { HelperText } from '@squaress/ui/helper-text'
+import type { Meta, StoryFn } from '@storybook/react'
+
+export default {
+    title: 'Components/HelperText',
+    component: HelperText,
+    argTypes: {
+        variant: {
+            control: { type: 'select', options: ['default', 'success', 'error'] },
+        },
+        show: {
+            control: { type: 'boolean' },
+        },
+        children: {
+            control: { type: 'text' },
+        },
+    },
+} as Meta<typeof HelperText>
+
+const Template: StoryFn = (args) => <HelperText {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+    variant: 'default',
+    show: true,
+    children: 'This is a default helper text.',
+}
+
+export const Success = Template.bind({})
+Success.args = {
+    variant: 'success',
+    show: true,
+    children: 'This is a success helper text.',
+}
+
+export const Error = Template.bind({})
+Error.args = {
+    variant: 'error',
+    show: true,
+    children: 'This is an error helper text.',
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index fda8728..782d7ef 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@squaress/ui",
-    "version": "0.0.68",
+    "version": "0.0.69",
     "description": "",
     "main": "lib/index.js",
     "module": "lib/index.mjs",
diff --git a/packages/ui/src/components/helper-text/helper-text.tsx b/packages/ui/src/components/helper-text/helper-text.tsx
index d84fa08..7bb8cff 100644
--- a/packages/ui/src/components/helper-text/helper-text.tsx
+++ b/packages/ui/src/components/helper-text/helper-text.tsx
@@ -7,12 +7,12 @@ import { cn } from '@utils/cn'
 import { Text } from '../text/text'
 import type { VariantProps } from 'class-variance-authority'
 
-export const helperTextVariants = cva('transition-colors', {
+export const helperTextVariants = cva('', {
     variants: {
         variant: {
-            default: 'text-[var(--color-fg-primary-base)]',
-            success: 'text-[var(--color-fg-positive-base)]',
-            error: 'text-[var(--color-fg-negative-base)]',
+            default: '!text-[var(--color-fg-primary-base)]',
+            success: '!text-[var(--color-fg-positive-base)]',
+            error: '!text-[var(--color-fg-negative-base)]',
         },
     },
 })
@@ -23,7 +23,7 @@ type TextProps = React.HTMLAttributes<HTMLElement> &
 export const HelperText = forwardRef<HTMLElement | null, TextProps>(
     ({ className, children, variant = 'default', show }) => {
         const id = uuidV4()
-
+        console.log('variant', variant)
         return (
             <AnimatePresence>
                 {show && (
@@ -39,15 +39,7 @@ export const HelperText = forwardRef<HTMLElement | null, TextProps>(
                             damping: 30,
                         }}
                     >
-                        <Text
-                            className={cn(
-                                helperTextVariants({
-                                    variant,
-                                }),
-                                className,
-                                'l2',
-                            )}
-                        >
+                        <Text className={cn(helperTextVariants({ variant }), className, 'l2')}>
                             {children}
                         </Text>
                     </motion.div>