Aceternity and Magic UI Components, Now for Vue and Nuxt
If you've spent any time browsing component showcases, you've probably seen Aceternity UI or Magic UI and thought, "That would look great in my Vue project." Then you remember those libraries are built for React. Inspira UI is the answer to that specific frustration—a community-driven collection that brings those same design aesthetics to Vue and Nuxt.
What It Does
Inspira UI is a curated collection of reusable components for Vue and Nuxt. It draws inspiration from Aceternity UI and Magic UI, adapting their designs for the Vue ecosystem, while also including custom components contributed by the community and created by the project's maintainers.
Here's the important distinction: this isn't a traditional component library where you install a package and import pre-built buttons and modals. Instead, it's a collection you pick from—you grab the components you need, customize them, and adapt them to fit your project. That approach gives you more control over the final result, though it also means you're expected to get your hands dirty with the code rather than just dropping in a dependency.
The project is MIT licensed, fully compatible with Nuxt, and designed to be mobile-friendly out of the box. Documentation and usage examples live at inspira-ui.com.
Why It's Cool
The gap Inspira UI fills is pretty obvious if you've ever worked in Vue and watched React developers show off their fancy animated components. Aceternity and Magic UI have become go-to sources for visually interesting UI elements, but they've been locked to React. This project changes that.
-
It's not a black box. Because Inspira UI isn't a traditional library, you're not fighting against abstractions or working around opinionated defaults. You take the component, you own the component. That's a meaningful difference when you need to match a specific design system or make unusual customizations.
-
The inspiration sources are strong. Aceternity UI and Magic UI have earned their reputations for good reason—they offer components that look polished without requiring you to be a CSS wizard. Getting that same visual quality in Vue is a genuine win.
-
Nuxt compatibility is first-class. The README explicitly calls out full Nuxt compatibility, which matters if you're building with Nuxt (and these days, a lot of Vue developers are). You won't be stuck troubleshooting SSR issues or module conflicts.
-
Community contributions are part of the design. The project doesn't just port existing components—it includes custom work from contributors. That means the collection can grow beyond what the original inspiration sources offer.
-
Configuration is a priority. The README points to a dedicated configuration guide, which suggests the project takes customization seriously rather than treating it as an afterthought.
The acknowledgment section is also worth noting. The project credits Aceternity UI for "providing the inspiration and permission to adapt the original designs," which is a classy way to handle derivative work. It also credits shadcn-vue and shadcn-docs-nuxt, so there's a clear lineage of Vue-ecosystem projects building on each other.
How to Try It
Getting started is straightforward:
- Visit the documentation at inspira-ui.com to browse the available components.
- Check the configuration guide to understand how to customize components for your project.
- Pick the components you need and integrate them into your Vue or Nuxt application.
The repository is at github.com/unovue/inspira-ui. Since this isn't a traditional npm-install-and-import library, you'll want to read the docs first to understand the workflow. The project also has a contribution guide if you want to give back.
The README is available in English, Chinese, and Italian, so if English isn't your first language, you might find a translation that helps.
Final Thoughts
Inspira UI is best suited for Vue and Nuxt developers who want visually distinctive components without starting from scratch—and who don't mind copying code into their projects rather than installing a package. If you prefer the convenience of a traditional component library, this might not be your thing. But if you've been envious of what React developers have access to, this project closes that gap. It's maintained by Rahul Vashishtha and welcomes contributions, so if you use it and find something missing, you can help make it better.
Follow @githubprojects for more developer tools and open source projects.