Skip to content

Introduction

Build animated sites 10x faster with components that you can copy and paste into your applications.

Spark UI is a collection of animated components built with Vue3, TailwindCss and @vueuse/motion. It serves as the Vue port of Magic UI. We have received official permission from the creator of Magic UI to bring this port to life, ensuring an authentic and high-quality experience for all Vue developers.

While Spark UI is a port of Magic UI, it has components from popular sites such as NuxtHub and Syntax UI. This blend brings together the best of various animated components, offering a diverse and powerful toolkit for building sleek, animated and modern interfaces with ease. Whether you're looking for flexibility or speed, Spark UI has you covered with its ready-to-use components.

Why Spark UI?

Spark UI was born out of a need to fill a gap in the Vue ecosystem, offering developers a versatile set of components that were previously hard to find in the Vue ecosystem. Drawing inspiration from some remarkable projects such Magic UI, Aceternity UI, NuxtHub, Syntax UI, and unique community contributions, Spark UI delivers a beautifully functional collection tailored for Vue applications. Its goal is to empower developers to create visually stunning and high-performing interfaces without the usual complexity. By combining the strengths of multiple design systems, Spark UI provides the perfect balance between creativity and ease of use, helping you build your applications faster.

While Spark UI offers a unique collection of animated components, we also encourage you to check out similar projects from other talented developers in the community. Collaboration and sharing are what make the Vue ecosystem so vibrant. You should check out Inspira UI as well.

Credits

This project is made possible by some remarkable projects such as:

  • Magic UI - For the beautiful components and inspiration.

  • Aceternity UI - For the beautiful components and inspiration.

  • Syntax UI - For the beautiful components.

  • Vitepress - The powerful Vue & Vite static generator that powers this documentation.

  • UnoCss - For the styling.

  • NuxtHub - For the particles component.

  • Shadcn Vue

  • Shiki - For the syntax highlighter.

Released under the MIT License.