feat: add TubesBackground component and types

apps/www/config/docs.ts

@@ -532,6 +532,12 @@ export const docsConfig: DocsConfig = {
           items: [],
           label: "New",
         },
+        {
+          title: "Tubes Background",
+          href: `/docs/components/tubes-background`,
+          items: [],
+          label: "New",
+        },
       ],
     },
     {

apps/www/content/docs/components/tubes-background.mdx

@@ -0,0 +1,71 @@
+---
+title: Tubes Background
+date: 2025-03-16
+description: A Three.js powered animated background with interactive 3D tubes that follow your cursor.
+author: magicui
+published: true
+---
+
+<ComponentPreview name="tubes-background-demo" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn@latest add @magicui/tubes-background
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install three
+npm install -D @types/three
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="tubes-background" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx showLineNumbers
+import { TubesBackground } from "@/components/ui/tubes-background"
+```
+
+```tsx showLineNumbers
+<TubesBackground>
+  <div className="w-80">
+    <p>Tubes Background</p>
+    <p>An interactive 3D tubes animation that follows your cursor.</p>
+  </div>
+</TubesBackground>
+```
+
+## Props
+
+| Prop                     | Type              | Default | Description                                           |
+| ------------------------ | ----------------- | ------- | ----------------------------------------------------- |
+| `children`               | `React.ReactNode` | `-`     | The content to overlay on top of the tubes background |
+| `className`              | `string`          | `-`     | Additional CSS classes for the container              |
+| `enableClickInteraction` | `boolean`         | `true`  | Whether clicking randomizes the tube and light colors |

apps/www/package.json

@@ -72,6 +72,7 @@
     "svg-dotted-map": "^2.0.1",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.13",
+    "three": "^0.183.2",
     "ts-morph": "^27.0.2",
     "tw-animate-css": "^1.3.8",
     "zod": "^4.1.11"
@@ -86,6 +87,7 @@
     "@types/node": "^20.19.14",
     "@types/react": "^19.1.1",
     "@types/react-dom": "^19.1.1",
+    "@types/three": "^0.183.1",
     "@types/unist": "^3.0.3",
     "eslint": "^9.36.0",
     "eslint-config-next": "15.5.4",