About spark-ui

Experience The Magic Of Animated Components. Crafted With Vue, TypeScript, TailwindCss And Vueuse Motion.

s

Published by

selemondev

Visit View Profile

README.md

View on GitHub

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

Component	What it does	Live demo
Animated Beam	SVG beams between nodes	Open →
Globe	Interactive 3D-style globe	Open →
Aurora Text	Gradient aurora typography	Open →
Hero Video Dialog	Video reveal in a dialog	Open →
Bento Grid	Animated bento layout	Open →
Orbiting Circles	Icons orbiting a center	Open →
Animated Tooltip	Shared-layout tooltips	Open →
Resizable Navbar	Scroll-aware navigation	Open →

Browse all 26 components on the components index (use the sidebar on the docs site).

Features

Copy & paste — Drop components into any Vue 3 + Tailwind project; 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

Read the installation guide (Vue 3, Tailwind, @vueuse/motion).
Open the component you want in the docs.
Copy the Vue source from the preview into your app and adjust paths or tokens as needed.

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 pnpm monorepo. Tooling is managed with Vite+ (vp CLI).

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

See AGENTS.md for agent-oriented workflow notes after the Vite+ migration.

All components


Animated Beam	Animated Gradient Text	Animated List
Animated Shiny Text	Animated Tooltip	Aurora Text
Avatar Circles	Bento Grid	Blur Fade
Blur In	Dot Pattern	Globe
Gradual Spacing	Hero Video Dialog	Letter Up
Marquee	Meteors	Orbiting Circles
Particles	Resizable Navbar	Retro Grid
Ripple	Scroll Progress	Skewed Infinite Scroll
Terminal	Typing Animation

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.

spark-ui