diff --git a/packages/ui/src/components/activity-log/activity-log.tsx b/packages/ui/src/components/activity-log/activity-log.tsx
index 9c6ecdb..6f68980 100644
--- a/packages/ui/src/components/activity-log/activity-log.tsx
+++ b/packages/ui/src/components/activity-log/activity-log.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, useMemo, useState } from "react";
 
 import { ArrowRight, ChevronLeft, ChevronRight } from "lucide-react";
diff --git a/packages/ui/src/components/animated-text/animated-text.tsx b/packages/ui/src/components/animated-text/animated-text.tsx
index db34399..94c196d 100644
--- a/packages/ui/src/components/animated-text/animated-text.tsx
+++ b/packages/ui/src/components/animated-text/animated-text.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 import { cn } from "../../lib/utils";
diff --git a/packages/ui/src/components/connector-edge/connector-edge.stories.tsx b/packages/ui/src/components/connector-edge/connector-edge.stories.tsx
index 228ece8..f4eda7d 100644
--- a/packages/ui/src/components/connector-edge/connector-edge.stories.tsx
+++ b/packages/ui/src/components/connector-edge/connector-edge.stories.tsx
@@ -3,10 +3,16 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ConnectorEdge } from "./connector-edge";
 
 const meta = {
+  args: {
+    end: { x: 320, y: 120 },
+    label: "artifact stream",
+    start: { x: 0, y: 0 },
+    state: "active",
+  },
   component: ConnectorEdge,
-  render: () => (
+  render: (args) => (
     <div className="rounded-2xl border border-dashed border-border/70 bg-muted/10 p-6">
-      <ConnectorEdge end={{ x: 320, y: 120 }} label="artifact stream" start={{ x: 0, y: 0 }} state="active" />
+      <ConnectorEdge {...args} />
     </div>
   ),
   title: "Canvas/ConnectorEdge",
diff --git a/packages/ui/src/components/data-list/data-list.tsx b/packages/ui/src/components/data-list/data-list.tsx
index 05fb17f..b53cc19 100644
--- a/packages/ui/src/components/data-list/data-list.tsx
+++ b/packages/ui/src/components/data-list/data-list.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 import { cva, type VariantProps } from "class-variance-authority";
diff --git a/packages/ui/src/components/multi-select/multi-select.stories.tsx b/packages/ui/src/components/multi-select/multi-select.stories.tsx
index b04a237..ec6b711 100644
--- a/packages/ui/src/components/multi-select/multi-select.stories.tsx
+++ b/packages/ui/src/components/multi-select/multi-select.stories.tsx
@@ -12,6 +12,10 @@ const options = [
 ];
 
 const meta = {
+  args: {
+    options: options,
+    placeholder: "Select frameworks",
+  },
   component: MultiSelect,
   title: "Form/MultiSelect",
 } satisfies Meta<typeof MultiSelect>;
@@ -19,28 +23,24 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-  args: {
-    options,
-    placeholder: "Select frameworks",
-  },
-};
+export const Default: Story = {};
 
 export const Searchable: Story = {
   args: {
-    options,
-    placeholder: "Select frameworks",
     searchable: true,
   },
 };
 
 export const Controlled: Story = {
-  render: () => {
+  args: {
+    searchable: true,
+  },
+  render: (args) => {
     const [value, setValue] = React.useState(["react", "vue"]);
 
     return (
       <div className="w-full max-w-sm">
-        <MultiSelect onValueChange={setValue} options={options} searchable value={value} />
+        <MultiSelect {...args} onValueChange={setValue} value={value} />
       </div>
     );
   },
diff --git a/packages/ui/src/components/spinner/unicode-spinner.tsx b/packages/ui/src/components/spinner/unicode-spinner.tsx
index 0908390..0ac8655 100644
--- a/packages/ui/src/components/spinner/unicode-spinner.tsx
+++ b/packages/ui/src/components/spinner/unicode-spinner.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 import { cn } from "../../lib/utils";
diff --git a/packages/ui/src/components/usage-breakdown/usage-breakdown.tsx b/packages/ui/src/components/usage-breakdown/usage-breakdown.tsx
index f1aeb91..a331d0e 100644
--- a/packages/ui/src/components/usage-breakdown/usage-breakdown.tsx
+++ b/packages/ui/src/components/usage-breakdown/usage-breakdown.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, type ReactNode, useMemo } from "react";
 
 import { ArrowDownRight, ArrowUpRight } from "lucide-react";