inspira-ui

Inspira UI - Animated Vue/Nuxt Component Library

Inspira UI is a collection of 120+ reusable, animated components powered by TailwindCSS v4, motion-v, GSAP, and Three.js — crafted to help ship beautiful Vue and Nuxt applications faster.

Table of Contents

• When to Use
• Quick Start
• Component Selection
• Core Patterns
• Critical Pitfalls
• Detailed References

When to Use This Skill

Use Inspira UI when building:

• Animated landing pages with hero sections, testimonials, and effects
• Modern web applications requiring 3D visualizations and interactive elements
• Marketing sites with eye-catching backgrounds and text animations
• Portfolio sites with image galleries, carousels, and showcase effects
• Interactive experiences with custom cursors, special effects, and particle systems
• Vue 3 or Nuxt 4 projects requiring production-ready animated components

Key Benefits:

• 120+ copy-paste components (not a traditional npm library)
• Full TypeScript support with Vue 3 Composition API
• TailwindCSS v4 with OkLch color space
• Responsive and mobile-optimized
• Free and open source (MIT license)

Quick Start

1. Install Core Dependencies

# Required for all components
bun add -d clsx tailwind-merge class-variance-authority tw-animate-css
bun add @vueuse/core motion-v

# Optional: For 3D components (Globe, Cosmic Portal, etc.)
bun add three @types/three

# Optional: For WebGL components (Fluid Cursor, Neural Background, etc.)
bun add ogl

2. Setup CN Utility

Create lib/utils.ts:

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

3. Configure CSS Variables

Add to your main.css. See references/SETUP.md for complete CSS configuration with OkLch colors.

4. Verify Setup

./scripts/verify-setup.sh

5. Copy Components

Browse inspira-ui.com/components, copy what you need into components/ui/.

Component Selection Workflow

What type of effect do you need?

1. Background Effects → Aurora, Cosmic Portal, Particles, Neural Background

   • See: references/components-list.md#backgrounds

2. Text Animations → Morphing Text, Glitch, Hyper Text, Sparkles Text

   • See: references/components-list.md#text-animations

3. 3D Visualizations → Globe, 3D Carousel, Icon Cloud, World Map

   • Dependencies: bun add three @types/three
   • See: references/components-list.md#visualization

4. Interactive Cursors → Fluid Cursor, Tailed Cursor, Smooth Cursor

   • Dependencies: bun add ogl (for WebGL cursors)
   • See: references/components-list.md#cursors

5. Animated Buttons → Shimmer, Ripple, Rainbow, Gradient

   • No extra dependencies
   • See: references/components-list.md#buttons

6. Special Effects → Confetti, Meteors, Neon Border, Glow Border

   • See: references/components-list.md#special-effects

For complete implementation details (props, full code, installation): Fetch https://inspira-ui.com/docs/llms-full.txt - LLM-optimized documentation with structured props tables and working code examples.

Core Usage Patterns

Pattern 1: Animated Landing Page

<template>
  <AuroraBackground>
    <Motion
      :initial="{ opacity: 0, y: 40, filter: 'blur(10px)' }"
      :while-in-view="{ opacity: 1, y: 0, filter: 'blur(0px)' }"
      :transition="{ delay: 0.3, duration: 0.8, ease: 'easeInOut' }"
      class="relative flex flex-col items-center gap-4 px-4"
    >
      <div class="text-center text-3xl font-bold md:text-7xl">
        Your amazing headline
      </div>
      <ShimmerButton>Get Started</ShimmerButton>
    </Motion>
  </AuroraBackground>
</template>

<script setup lang="ts">
import { Motion } from "motion-v";
import AuroraBackground from "~/components/ui/AuroraBackground.vue";
import ShimmerButton from "~/components/ui/ShimmerButton.vue";
</script>

Pattern 2: Props with TypeScript Interfaces

<script setup lang="ts">
// ALWAYS use interface-based props
interface Props {
  title: string;
  count?: number;
  variant?: "primary" | "secondary";
}

const props = withDefaults(defineProps<Props>(), {
  count: 0,
  variant: "primary",
});
</script>

Pattern 3: Explicit Imports (Critical for Vue.js Compatibility)

<script setup lang="ts">
// ALWAYS include explicit imports even with Nuxt auto-imports
import { ref, onMounted, computed } from "vue";
import { useWindowSize } from "@vueuse/core";

const { width } = useWindowSize();
</script>

Pattern 4: WebGL Component Cleanup

<script setup lang="ts">
import { onUnmounted } from "vue";

let animationFrame: number;
let renderer: any;

onUnmounted(() => {
  // CRITICAL: Clean up WebGL resources to prevent memory leaks
  if (animationFrame) cancelAnimationFrame(animationFrame);
  if (renderer) renderer.dispose();
});
</script>

Pattern 5: Client-Only Wrapper (Nuxt)

<template>
  <ClientOnly>
    <FluidCursor />
  </ClientOnly>
</template>

Critical Pitfalls to Avoid

1. Accessibility Bug (CRITICAL)

The original Inspira UI docs have --destructive-foreground set to the same color as --destructive, making text invisible. Use the corrected value:

:root {
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0); /* CORRECTED */
}

2. Missing CSS Imports

/* REQUIRED in main.css */
@import "tailwindcss";
@import "tw-animate-css";  /* Often forgotten! */

3. Wrong Props Syntax

// DON'T: Object syntax
const props = defineProps({ title: { type: String } });

// DO: Interface syntax
interface Props { title: string; }
const props = defineProps<Props>();

4. Three.js Without ClientOnly (Nuxt)

<!-- WRONG: Will fail during SSR -->
<GithubGlobe :markers="markers" />

<!-- CORRECT -->
<ClientOnly>
  <GithubGlobe :markers="markers" />
</ClientOnly>

5. Using Enums Instead of as const

// DON'T: TypeScript enums
enum ButtonVariant { Primary = "primary" }

// DO: as const objects
const ButtonVariants = { Primary: "primary" } as const;

Token Efficiency

Average Token Savings: ~65%

• Without skill: ~15k tokens (trial-and-error with setup)
• With skill: ~5k tokens (direct implementation)

Errors Prevented: 13+ common issues including:

1. Critical accessibility bug (destructive-foreground)
2. TailwindCSS v4 CSS variables misconfiguration
3. Missing @import "tw-animate-css"
4. Motion-V setup issues
5. Three.js/OGL without ClientOnly
6. Props typed with object syntax instead of interfaces
7. Missing explicit imports

Detailed Documentation

For complete setup with all CSS variables: references/SETUP.md

For all 120+ components with dependencies: references/components-list.md

For troubleshooting common issues: references/TROUBLESHOOTING.md

For TypeScript patterns and conventions: references/CODE_PATTERNS.md

Keywords

Frameworks: Vue, Vue 3, Nuxt, Nuxt 4, Composition API, script setup

Styling: TailwindCSS v4, OkLch, CSS variables, dark mode

Animation: motion-v, GSAP, Three.js, WebGL, OGL, canvas

Components: aurora background, shimmer button, morphing text, 3D globe, fluid cursor, confetti, neon border, icon cloud, flip card, particles

Use Cases: landing pages, hero sections, animated backgrounds, interactive UI, marketing sites, portfolios, 3D websites

Problems Solved: Vue animations, Nuxt animations, animated components, 3D effects, particle effects, modern UI effects

Resources

• Official Documentation: https://inspira-ui.com/docs
• LLM-Optimized Docs: https://inspira-ui.com/docs/llms-full.txt (complete props, code examples, installation)
• Component Gallery: https://inspira-ui.com/components
• GitHub Repository: https://github.com/unovue/inspira-ui
• Discord Community: https://discord.gg/Xbh5DwJRc9

---

Production Status: ✅ Production-Ready Token Efficiency: ✅ ~65% savings Error Prevention: ✅ 13+ common issues prevented Last Updated: 2025-11-12