# spark-ui hands you the component files instead of a dependency

> Spark UI is a catalogue of animated Vue 3 components, built with TypeScript, Tailwind CSS and @vueuse/motion, that you copy into your own repository rather than install from npm. That choice makes every component yours to edit, and it also makes the version tracking, the Tailwind configuration and the motion plugin setup your problem.

**selemondev/spark-ui** — Experience The Magic Of Animated Components. Crafted With Vue, TypeScript, TailwindCss And Vueuse Motion.

- Repository: https://github.com/selemondev/spark-ui
- Website: https://ui.selemon.dev
- Stars: 632 · Forks: 14
- Language: TypeScript
- License: MIT
- Published: 2026-10-21 · Updated: 2026-10-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/selemondev-spark-ui

## Copy and paste is the distribution model, not a slogan

Spark UI describes itself as animated Vue 3 components you can copy, paste and ship, built with TypeScript, Tailwind CSS and @vueuse/motion. The distribution model follows directly from that. There is no opaque runtime package to add, and the components land in your repository as source files that you own from the moment you copy them.

The stated requirements are Vue 3.5 and later, Tailwind CSS 3, theme tokens and @vueuse/motion. The four feature claims are that the components are copy and paste, TypeScript-first with typed props and patterns that work with vue-tsc, motion-ready through @vueuse/motion with compatibility with related motion libraries where a component notes it, and documented, with each component page carrying a live preview, a source tab and install notes.

The lineage is declared rather than hidden. The project says it is officially inspired by Magic UI, with pieces taken from NuxtHub, Syntax UI and community ports. That tells you where the design language comes from and, more usefully, that a component you like here may exist upstream in a form that receives updates.

The licence is MIT, the documentation site is ui.selemon.dev, and the default branch is dev, with the package version in the repository manifest at 2.0.0.

## Installation is a file copy into a components directory

The quick start is three steps, and the second one is the one that matters.

You follow the installation guide first, which covers Vue 3.5 and later, Tailwind CSS 3, the theme tokens and @vueuse/motion. Then you open a component page and copy all component files from its Installation section into src/components/spark-ui/<component>/, or into components/spark-ui/<component>/ in a Nuxt 3 project, including any listed dependencies and the CSS or Tailwind configuration the component needs. The third step is a warning: the preview's source is to be copied as a usage example, not as the component implementation.

That last point saves an hour of confusion. On a component page, the demo code and the implementation code look similar, and the demo will reference paths and props that differ from yours. The documented import shapes are component imports at @/components/spark-ui/<component>/<file>.vue and utility imports at @/lib/utils, and the guide says to adjust the paths if you choose a different destination.

The honest trade-off sits underneath the convenience. Because there is no package to bump, there is no upgrade path either. When the upstream component is fixed, or when Tailwind 4 arrives and the utility classes move, you find out by looking at the project you copied from, not by reading a changelog for a dependency.

## @vueuse/motion needs one plugin call, and it is easy to miss

Motion is not free-standing in Vue. The animation primitives come from @vueuse/motion, which needs its plugin registered on the application instance, and the README gives the minimal setup:

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

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

That is the only application-level wiring in the whole system, and it is worth calling out because components that animate will do nothing at all if the plugin is missing. The failure is quiet rather than loud: no error, no build failure, just elements that sit still.

For a Nuxt 3 project the same plugin has to be registered in the Nuxt plugin layer rather than in a main entry file, and since the guide only gives the Vue shape, that is where you will adapt.

The components are otherwise ordinary Vue 3 with TypeScript props, and the TypeScript-first claim is checked by the project's own tooling rather than asserted: the typecheck script in the repository manifest runs vue-tsc against the docs project and tsc against the scripts project, so a component that ships an untyped prop breaks the build rather than a consumer's editor.

## The catalogue leans on SVG beams, shared layouts and scroll awareness

The component list is the substance of the project, and it falls into recognisable families.

Animated Beam draws SVG beams between nodes, which is the component the live demo pages lead with, and Globe is an interactive 3D-style globe. Aurora Text is gradient aurora typography, Hero Video Dialog is a video reveal inside a dialog, Bento Grid is an animated bento layout, and Orbiting Circles is icons orbiting a centre.

Two of them are worth singling out because their technique is reusable beyond the component itself. Animated Tooltip is built on shared-layout tooltips, so the tooltip animates between positions rather than fading in place, and Resizable Navbar is scroll-aware navigation, meaning the component reacts to scroll position instead of being a static bar.

The longer catalogue, listed in the same table, includes Android, Animated Circular Progress Bar, Animated Gradient Text, Animated Grid Pattern, Animated List, Animated Shiny Text and Animated Theme Toggler, among others, and the docs site has a sidebar to browse all of them. Every entry has its own markdown page under docs/content/components, and those pages are also where the install notes live.

Each page is interactive, and the project makes a point of that: open a page, tweak the preview, and copy the source. For a catalogue whose value is visual, a live preview that you can manipulate before copying is a better test than a screenshot.

## A script chain keeps the registry in step with the upstream project

The repository is more than a folder of components, and the scripts in the package manifest explain why.

There is a sync:magic-ui script that runs a chain of six node scripts in order: cloning the Magic UI repository, building a Magic UI registry, building a Spark UI registry, comparing the two registries, updating the component history, and normalising the repository. There is a companion script for creating agent issues, a validate:agent-pr script that validates a component, and a normalise:repository:check variant that runs the normalisation in check mode so a diff can be inspected rather than applied.

What that machinery amounts to is a registry pipeline. The registry directory in the tree holds the catalogue metadata, and the scripts keep it aligned with the upstream project the components are inspired by, with a history of what changed. The check mode is the responsible part, since it lets a maintainer see what a sync would do before it does it.

For an outside contributor, the useful consequence is the opposite one: the component pages in docs are the contract. A component that arrives as a page with a preview, a source tab and install notes has been through the same pipeline the scripts describe, and the CHANGELOG.md in the root plus the generate:release script, which uses changelogen, are how changes get recorded.

## bun, Vite+ and one command per task in the dev loop

The development setup is a bun workspace monorepo with the tooling managed through Vite+ and its vp CLI. The command list is short and each entry has a clear job:

```bash
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
```

The vp install line deserves a note, because it is a step people skip. The comment says to sync the Vite+ toolchain after a pull, which means the CLI and its pinned tool versions are not carried entirely in the repository, and a fresh clone that skips that line can behave differently from a machine that has run it. The docs server runs on port 5555 locally, which is worth knowing before you conclude that something is broken because your usual port is taken.

The rest of the manifest is conventional: a lint script with a fix variant, a build that delegates to the docs package through the workspace filter, a typecheck covering both the docs and the scripts, a test script with a watch mode and a coverage variant, and a clean that removes the VitePress dist and cache directories.

On releases, v0.0.2 came in April 2025, v1.0.0 in July 2025 and v2.0.0 on 2026-10-08, the same day as the last push to the repository, so the major version moved when the catalogue did rather than on a schedule.

## Conclusion

spark-ui is worth adopting when you want a handful of polished animated components in a Vue 3.5 application and would rather own the source than track a dependency, since the components arrive as source you can adjust, and the docs give you a live preview next to the code. It is the wrong choice if you need a maintained versioned package, if your project is not on Tailwind CSS 3 with @vueuse/motion already installed, or if you want a component set that stays in step with framework changes. Verify first that the component you want works with the Vue and Tailwind versions you run, copy the listed CSS and Tailwind configuration along with the files, and check whether the upstream project you are borrowing from has changed since the copy, because nothing in the repository will tell you.

## FAQ

### How do I install a Spark UI component?

Copy all component files from the component page Installation section into src/components/spark-ui/<component>/, or components/spark-ui/<component>/ in Nuxt 3, including any listed dependencies and the CSS or Tailwind configuration. The project needs Vue 3.5 or later, Tailwind CSS 3, theme tokens and @vueuse/motion.

### Do I need to add an npm dependency to use spark-ui?

No runtime package is required, since the components are copied as source into your own repository. You do need @vueuse/motion installed and its plugin registered, along with Tailwind CSS 3 and theme tokens.

### Which motion library does spark-ui use and how is it set up?

Animations are powered by @vueuse/motion. The plugin is registered on the application instance with createApp(App).use(MotionPlugin).mount("#app"), and in a Nuxt 3 project the same plugin goes into the Nuxt plugin layer.

### Which components does spark-ui include?

The catalogue includes Animated Beam, Globe, Aurora Text, Hero Video Dialog, Bento Grid, Orbiting Circles, Animated Tooltip with shared-layout tooltips, and a scroll-aware Resizable Navbar, plus items such as Android, Animated Circular Progress Bar, Animated Gradient Text, Animated Grid Pattern, Animated List, Animated Shiny Text and Animated Theme Toggler.

### How do I develop the spark-ui documentation site locally?

The repository is a bun workspace managed with the Vite+ CLI. Run bun install, then vp install to sync the toolchain after a pull, bun run docs:dev for the docs at http://localhost:5555, vp check for format, lint and typecheck, and vp test for the unit tests.

## Sources

- [License: MIT](https://github.com/selemondev/spark-ui/blob/dev/LICENSE)
- [Project website](https://ui.selemon.dev)
- [README](https://github.com/selemondev/spark-ui/blob/dev/README.md)
- [Releases](https://github.com/selemondev/spark-ui/releases)
- [selemondev/spark-ui on GitHub](https://github.com/selemondev/spark-ui)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/selemondev-spark-ui