unovue/inspira-ui

★ 4,643VueAudience · vibe coderComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((Inspira UI))
    Component Types
      Animated sections
      Cards and grids
      Backgrounds
    Tech Stack
      Vue 3
      Nuxt
      Tailwind CSS
    Usage Model
      Copy into project
      Full code ownership
      No lock-in
    Audience
      Vue developers
      Vibe coders
      Frontend builders

mindmap root((Inspira UI)) Component Types Animated sections Cards and grids Backgrounds Tech Stack Vue 3 Nuxt Tailwind CSS Usage Model Copy into project Full code ownership No lock-in Audience Vue developers Vibe coders Frontend builders

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Copy animated hero sections, gradient backgrounds, and card effects directly into a Vue or Nuxt project

USE CASE 2

Add visually rich UI elements to a vibe-coded site without writing custom CSS or animations from scratch

USE CASE 3

Build a complete landing page UI using Tailwind-compatible components tuned for modern design trends

USE CASE 4

Modify copied components to match your brand colors and animation style without dealing with library update conflicts

Tech stack

VueNuxtTailwind CSSTypeScript

Getting it running

Difficulty · easy Time to first run · 5min

Copy components directly into your project, requires an existing Vue or Nuxt app with Tailwind CSS already configured.

Free to use for any purpose, including commercial projects, as long as you keep the copyright notice.

In plain English

Inspira UI is a collection of pre-built visual components for developers building websites with Vue and Nuxt, two popular JavaScript frameworks. The project was started to bring a set of visually polished components, originally designed for React-based ecosystems, into the Vue and Nuxt world. It draws design inspiration from Aceternity UI and Magic UI, and includes additional components contributed by its community. Rather than being a traditional component library you install and use as-is, Inspira UI is designed for you to copy components directly into your own project and then modify them to match your needs. This means you have full control over the code and are not locked into the library's update cycle or design decisions. Components are built with Tailwind CSS, including support for Tailwind v4, and work with shadcn-vue under the hood. The component collection covers a broad range of interface elements and is mobile-friendly. Full documentation, configuration guides, and usage examples are on the project's website. The README is available in English, Chinese, and Italian. The project is free and open source under the MIT license. It was created by Rahul Vashishtha, who continues to maintain and expand it. Contributions are welcome through GitHub issues and pull requests, and a contribution guide is on the documentation site. Sponsoring the maintainer directly through GitHub Sponsors is also an option for people who want to support ongoing development.

Copy-paste prompts

Prompt 1

I'm building a Nuxt 3 landing page and want an animated gradient background and card hover effects from Inspira UI. Show me how to copy the components into my project and wire them up with Tailwind CSS v4

Prompt 2

I have a Vue 3 project with shadcn-vue installed. How do I add Inspira UI components alongside it and make sure the Tailwind styles from both do not conflict?

Prompt 3

I copied an Inspira UI animated card component but want to change the color scheme and slow down the animation. Walk me through which Tailwind classes and CSS variables control those settings

Prompt 4

Show me how to build a mobile-responsive hero section using Inspira UI in a Nuxt 3 app, including which dependencies to install first

Open on GitHub → Explain another repo

← unovue on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.