Col
–
Libraries

Inspira UI

inspira-ui.com

Animated Vue and Nuxt components for text effects, backgrounds, and interactive websites.

Install

npm install @vueuse/core motion-v tw-animate-css @inspira-ui/plugins

Getting started

  1. Use a Vue or Nuxt project with Tailwind CSS v4 configured. Projects using Tailwind CSS v3 should follow the separate v1 documentation at v1.inspira-ui.com.

  2. Install `@vueuse/core`, `motion-v`, `tw-animate-css`, and `@inspira-ui/plugins`, then follow Motion's Vue integration guide at motion.dev/docs/vue for the current framework setup.

  3. Merge the installation page's CSS imports and theme variables into the global stylesheet. Existing shadcn-vue projects can skip the theme-variable setup; Nuxt UI projects use the documented Nuxt UI token mapping.

  4. Choose a component from the official catalog, copy its Vue source and helpers into the app, and install any dependencies listed on that component page. The supporting packages alone do not install all component source.

  5. Some examples use Iconify icons. Add icon support only when the chosen component requires it, and check client-only rendering for browser or WebGL effects in Nuxt.

Agent setup prompt

Paste this into a coding agent to set Inspira UI up in an existing project.

Add Inspira UI (https://inspira-ui.com) components to this existing Vue or Nuxt project.

Inspira UI provides editable Vue components with animation and visual effects. Its current guide uses Tailwind CSS v4; Tailwind v3 projects have separate documentation at https://v1.inspira-ui.com.

Prerequisites:
- Inspect the Vue/Nuxt version, Tailwind setup, global CSS, aliases, and existing shadcn-vue or Nuxt UI configuration.

Steps:
1. Read https://inspira-ui.com/docs/en/getting-started/installation and the exact component page before copying code.
2. Install the documented supporting dependencies: npm install @vueuse/core motion-v tw-animate-css @inspira-ui/plugins, using the project's package manager.
3. Follow https://motion.dev/docs/vue for Motion's framework integration. Merge the required CSS imports and theme variables into the existing stylesheet. Use the Nuxt UI mapping if applicable; keep existing shadcn-vue tokens when already configured.
4. Copy only the requested component and its required helpers from the official page. Preserve the project's import aliases and install component-specific dependencies or Iconify support only when needed.
5. Connect its props to project state, preserve reduced-motion behavior, and use client-only rendering for effects that require browser APIs. Run typecheck and build using the app's existing scripts.

Use Vue component APIs from the current documentation rather than translating remembered React examples.