Spark UI

Animated Vue 3 components you can copy, paste, and ship — built with TypeScript, Tailwind CSS, and @vueuse/motion.

Documentation · Components · Installation · Report a bug

Live demos

Every component in the docs is interactive — open a page, tweak the preview, and copy the source. Here are a few highlights:

Animated Beam  ·  Globe  ·  Aurora Text  ·  Meteors  ·  Terminal  ·  Marquee

Browse the component collection using the sidebar on the docs site.

Features

• Copy & paste — Drop components into any project using Vue 3.5+ and Tailwind CSS 3; no opaque runtime package required.
• TypeScript-first — Typed props and patterns that work with vue-tsc.
• Motion-ready — Animations powered by @vueuse/motion (and compatible with related motion libraries where noted per component).
• Magic UI lineage — Officially inspired by Magic UI, plus pieces from NuxtHub, Syntax UI, and community ports.
• Documented — Each component page includes a live preview, source tab, and install notes.

Quick start

1. Follow the installation guide for Vue 3.5+, Tailwind CSS 3, theme tokens, and @vueuse/motion.
2. Open a component page and copy all component files from its Installation section into src/components/spark-ui/<component>/ (or components/spark-ui/<component>/ in Nuxt 3), including any listed dependencies and CSS or Tailwind configuration.
3. Copy the preview's source as a usage example, not as the component implementation. Component imports use @/components/spark-ui/<component>/<file>.vue; utility imports use @/lib/utils. Adjust paths if you choose a different destination.

Minimal motion setup:

import { createApp } from "vue";
import { MotionPlugin } from "@vueuse/motion";
import App from "./App.vue";

createApp(App).use(MotionPlugin).mount("#app");

Development

This repo is a bun workspace monorepo. Tooling is managed with Vite+ (vp CLI).

bun install
vp install          # sync Vite+ toolchain after pull
bun run docs:dev    # docs at http://localhost:5555
vp check            # format, lint, and typecheck
vp test             # unit tests
bun run build       # production docs build

All components

Why Spark UI?

Spark UI fills a gap in the Vue ecosystem: polished, animated marketing and app UI blocks that were easy to find for React but harder to source for Vue. It combines inspiration from Magic UI, Aceternity UI, NuxtHub, Syntax UI, and community work into one copy-paste-friendly collection.

Also worth exploring: Inspira UI.

Credits

• Magic UI — components and inspiration
• Aceternity UI — design inspiration
• Syntax UI — additional components
• VitePress — documentation site
• UnoCSS — styling in docs
• NuxtHub — particles component
• Shadcn Vue — patterns
• Shiki — syntax highlighting

Contributing

Contributions are welcome. Please read the Code of Conduct and Contributing Guide, then open an issue or pull request on GitHub.

License

MIT © Selemondev