diff --git a/packages/raystack/components/avatar/avatar.tsx b/packages/raystack/components/avatar/avatar.tsx
index 48dde77eb..18c6151f6 100644
--- a/packages/raystack/components/avatar/avatar.tsx
+++ b/packages/raystack/components/avatar/avatar.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
 import { cva, cx, VariantProps } from 'class-variance-authority';
 import { ComponentProps, isValidElement, ReactElement, ReactNode } from 'react';
diff --git a/packages/raystack/components/button/button.tsx b/packages/raystack/components/button/button.tsx
index d523842ca..f02835b89 100644
--- a/packages/raystack/components/button/button.tsx
+++ b/packages/raystack/components/button/button.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Button as ButtonPrimitive } from '@base-ui/react';
 import { cva, cx, type VariantProps } from 'class-variance-authority';
 import { ReactNode } from 'react';
diff --git a/packages/raystack/components/flex/flex.tsx b/packages/raystack/components/flex/flex.tsx
index e7aa94c7c..01960ab3b 100644
--- a/packages/raystack/components/flex/flex.tsx
+++ b/packages/raystack/components/flex/flex.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { mergeProps, useRender } from '@base-ui/react';
 import { cva, VariantProps } from 'class-variance-authority';
 import styles from './flex.module.css';
diff --git a/packages/raystack/components/grid/grid-item.tsx b/packages/raystack/components/grid/grid-item.tsx
index 1078f61e6..cf7ad7a6f 100644
--- a/packages/raystack/components/grid/grid-item.tsx
+++ b/packages/raystack/components/grid/grid-item.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { mergeProps, useRender } from '@base-ui/react';
 import { AlignType } from './types';
 
diff --git a/packages/raystack/components/grid/grid.tsx b/packages/raystack/components/grid/grid.tsx
index 74f80696e..537e7a613 100644
--- a/packages/raystack/components/grid/grid.tsx
+++ b/packages/raystack/components/grid/grid.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { mergeProps, useRender } from '@base-ui/react';
 import { useMemo } from 'react';
 import { AlignExtendedType, AlignType } from './types';
diff --git a/packages/raystack/components/radio/radio.tsx b/packages/raystack/components/radio/radio.tsx
index 81e79b73e..7785540fb 100644
--- a/packages/raystack/components/radio/radio.tsx
+++ b/packages/raystack/components/radio/radio.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Radio as RadioPrimitive } from '@base-ui/react/radio';
 import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
 import { cx } from 'class-variance-authority';
diff --git a/packages/raystack/components/separator/separator.tsx b/packages/raystack/components/separator/separator.tsx
index fedbe3bb5..531c8b148 100644
--- a/packages/raystack/components/separator/separator.tsx
+++ b/packages/raystack/components/separator/separator.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
 import { cva, type VariantProps } from 'class-variance-authority';
 
diff --git a/packages/raystack/components/switch/switch.tsx b/packages/raystack/components/switch/switch.tsx
index 214ec533b..fcee7f5b8 100644
--- a/packages/raystack/components/switch/switch.tsx
+++ b/packages/raystack/components/switch/switch.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
 import { cva, type VariantProps } from 'class-variance-authority';
 
diff --git a/packages/raystack/components/tabs/tabs.tsx b/packages/raystack/components/tabs/tabs.tsx
index f41a5572b..8c79aff64 100644
--- a/packages/raystack/components/tabs/tabs.tsx
+++ b/packages/raystack/components/tabs/tabs.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Tabs as TabsPrimitive } from '@base-ui/react';
 import { cva, cx, type VariantProps } from 'class-variance-authority';
 import { ReactNode } from 'react';