docs: add warning alerts for Nuxt-only syntax in component documentation

content/2.components/3d-card.md

@@ -13,6 +13,10 @@ With rotation
 ::ComponentLoader{label="Preview" componentName="CardDemo2" type="examples"}
 ::
 
+::alert{type="warning"}
+This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
+::
+
 ## API
 
 ::steps

content/2.components/animated-beam.md

@@ -6,6 +6,10 @@ description: An SVG beam connecting elements with animation.
 ::ComponentLoader{label="Preview" componentName="AnimatedBeamDemo" type="examples"}
 ::
 
+::alert{type="warning"}
+This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
+::
+
 ## API
 
 | Prop Name            | Type          | Default                | Description                                                                  |

content/2.components/animated-list.md

@@ -12,6 +12,10 @@ description: A sequentially animated list that introduces each item with a timed
 | --------- | -------- | ------- | -------------------------------------------------------------- |
 | `delay`   | `number` | `1000`  | The delay in milliseconds before adding each item to the list. |
 
+::alert{type="warning"}
+This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
+::
+
 ## Component Code
 
 You can copy and paste the following code to create this component:

content/2.components/blur-reveal.md

@@ -6,6 +6,10 @@ description: A component to smoothly blur fade in content.
 ::ComponentLoader{label="Preview" componentName="BlurRevealDemo" type="examples"}
 ::
 
+::alert{type="warning"}
+This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
+::
+
 ## API
 
 | Prop Name  | Type     | Default | Description                                                                  |

content/2.components/border-beam.md

@@ -6,6 +6,10 @@ description: A stylish animated border beam effect with customizable size, durat
 ::ComponentLoader{label="Preview" componentName="BorderBeamDemo" type="examples"}
 ::
 
+::alert{type="warning"}
+This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
+::
+
 ## API
 
 | Prop Name     | Type     | Default     | Description                                                           |

content/2.components/file-upload.md

@@ -11,6 +11,10 @@ navBadges:
 
 ## API
 
+::alert{type="warning"}
+This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
+::
+
 ::steps
 
 ### `FileUpload`

content/2.components/flickering-grid.md

@@ -10,6 +10,10 @@ navBadges:
 ::ComponentLoader{label="Preview" componentName="FlickeringGridDemo" type="examples" id="flickering-grid"}
 ::
 
+::alert{type="warning"}
+This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
+::
+
 ## API
 
 | Prop Name       | Type     | Default        | Description                            |

content/2.components/glow-border.md

@@ -6,6 +6,10 @@ description: An animated border effect.
 ::ComponentLoader{label="Preview" componentName="GlowBorderDemo" type="examples"}
 ::
 
+::alert{type="warning"}
+This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
+::
+
 ## API
 
 | Prop Name      | Type                 | Default | Description                                                |

content/2.components/meteors.md

@@ -6,6 +6,10 @@ description: A component that displays a meteor shower animation with customizab
 ::ComponentLoader{label="Preview" componentName="MeteorsDemo" type="examples"}  
 ::
 
+::alert{type="warning"}
+This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
+::
+
 ## API
 
 | Prop Name | Type     | Default | Description                                                       |

content/2.components/morphing-text.md

@@ -10,6 +10,10 @@ navBadges:
 ::ComponentLoader{label="Preview" componentName="MorphingTextDemo" type="examples" id="morphing-text"}
 ::
 
+::alert{type="warning"}
+This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
+::
+
 ## API
 
 | Prop Name      | Type       | Default | Description                           |

content/2.components/tetris.md

@@ -9,6 +9,10 @@ navBadges:
 ::ComponentLoader{label="Preview" componentName="TetrisDemo" type="examples" id="tetris"}
 ::
 
+::alert{type="warning"}
+This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
+::
+
 ::alert
 **Note:** This component requires `theme-colors` as a dependency. Please install these using following commands.
 

content/2.components/text-generate-effect.md

@@ -13,6 +13,10 @@ Two text with different delay
 ::ComponentLoader{label="Preview" componentName="TextGenerateEffectDemoDelayed" type="examples" id="text-generate-effect"}
 ::
 
+::alert{type="warning"}
+This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
+::
+
 ## API
 
 | Prop Name  | Type      | Default  | Description                                                            |

content/2.components/text-hover-effect.md

@@ -6,6 +6,10 @@ description: A text hover effect that animates and outlines gradient on hover, a
 ::ComponentLoader{label="Preview" componentName="TextHoverEffectDemo" type="examples"}
 ::
 
+::alert{type="warning"}
+This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
+::
+
 ## API
 
 | Prop Name     | Type     | Default  | Description                                               |

content/2.components/text-scroll-reveal.md

@@ -6,6 +6,10 @@ description: A component that reveals text word by word as you scroll, with cust
 ::ComponentLoader{label="Preview" componentName="TextScrollRevealDemo" type="examples"}
 ::
 
+::alert{type="warning"}
+This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
+::
+
 ## API
 
 | Prop Name | Type     | Default | Description                                                         |