Spark UI
Getting started

Introduction

Spark UI is a library of animated React and TypeScript components: the kind of motion you’d normally pay an agency to build, delivered as source you own outright.

What is Spark UI

Every component in the library is a single, self-contained .tsx file built with GSAP-driven animation and Tailwind. There’s no wrapper package to install and no runtime dependency on Spark UI itself. When you add a component, that file becomes part of your codebase, the same way it would if you’d written it yourself.

Each component ships with a full set of props for customization (colors, fonts, text, images, and animation speed), so what you get out of the box is rarely what you ship. You’re expected to make it yours.

Why Spark UI

  • Full customization on every component: color, font family, text scale, images, and copy, not just a color prop.
  • One file per component. No dependency to upgrade, no breaking change to track. The code is yours the moment you add it.
  • A CLI that installs the real source, plus its peer dependencies and static assets, with one command.
  • An MCP server, so agents like Claude can search the library and pull a component, customized to spec, straight into your project.
  • Motion tuned to match its real-world reference, not an approximation. Timings, easing, and sequencing built to hold up under scrutiny.

Prerequisites

Components are plain React, so they’ll run anywhere React does. A couple of things to have in place:

  • React 18 or newer.
  • Tailwind CSS configured in your project, since components are styled with Tailwind utility classes.
  • gsap installed, as nearly every component animates with it. A handful of components have their own additional dependency (e.g. three for the WebGL video effect); the CLI installs whatever a given component actually needs, nothing more.

Quick start

Three ways in, depending on how hands-on you want to be.

1. CLI

Writes the component into your project, downloads the images it references, and installs the packages it imports.

npx spark-ui-registry@latest add aurora-login-card

See everything available:

npx spark-ui-registry@latest list

2. Browse and copy

Open any component’s page, tune it in the live customizer, then copy the source or download the file directly.

3. MCP

Connect the registry to Claude Code or another MCP client and ask for what you need.

claude mcp add --transport http spark-ui https://spark-ui-cyan.vercel.app/api/mcp

Next steps

Browse components
See everything available, live.
Set up MCP
Connect an AI agent to the registry.