Animated Next.js UI Components with Tailwind CSS and Motion – Spark UI

Spark UI is a React and Next.js component library that provides a collection of UI components including animated backgrounds, text effects, media displays, interactive widgets, and product details.

Every component lands as a local .tsx file. Styling flows through semantic CSS variables with light and dark mode support out of the box.

Features

• Copies component source code directly into your project via the shadcn CLI.
• Supports Tailwind CSS v4 with OKLCH semantic tokens and automatic light/dark theming.
• Includes Framer Motion animations that respect user motion preferences.
• keyboard navigation, visible focus, and ARIA attributes.
• Delivers components as editable TypeScript source files.

How To Use Spark UI

Set Up shadcn/ui

Spark UI requires React 19 or later, Tailwind CSS v4, TypeScript, and the shared shadcn utilities.

Initialize shadcn/ui when your project does not contain components.json and the cn() helper at @/lib/utils.

npx shadcn@latest init

Most components use Framer Motion and common shadcn dependencies.

npm install framer-motion lucide-react clsx tailwind-merge

Inspect and Install a Component

Use shadcn view to inspect a registry item before adding its files and dependencies.

npx shadcn@latest view https://spark-ui-olive.vercel.app/r/shimmer-text.json

Install the component from the same registry URL:

npx shadcn@latest add https://spark-ui-olive.vercel.app/r/shimmer-text.json

Configure a Registry Namespace

Add the registry template to components.json when you plan to install several Spark UI components.

{
  "registries": {
    "@spark-ui": "https://spark-ui-olive.vercel.app/r/{name}.json"
  }
}

Components can then be installed by registry name:

npx shadcn@latest add @spark-ui/shimmer-text

Basic Usage

Import the installed component from your local component directory.

import { ShimmerText } from "@/components/shimmer-text";
export function ProductAnnouncement() {
  return (
    <ShimmerText
      variant="purple"
      duration={2.4}
      className="text-3xl font-semibold"
    >
      New analytics workspace
    </ShimmerText>
  );
}

Available UI Components

Optional AI Coding Agent Skill

Spark UI includes an Agent Skill for Claude Code, Cursor, Codex, Windsurf, and compatible coding tools. The skill contains component names, registry commands, import paths, composition rules, and styling conventions.

npx skills add codeweb-dev/spark-ui --skill spark-ui

Alternatives and Related Resources

• UI TripleD: 100+ Shadcn and Framer Motion Components for Next.js
• Spectrum UI: Copy-Paste Components with Motion Effects
• SHSF UI: Motion-First Components for shadcn/ui
• uselayouts: UI Components and Micro-Interactions for Next.js

FAQs

Q: Is Spark UI installed as an npm package?
A: No. Spark UI distributes components through a shadcn-compatible registry. The CLI copies each component and its declared dependencies into your project.

Q: Why did a component install into the wrong folder?
A: Check the component alias in components.json. The shadcn CLI uses that alias to choose the destination directory and generate import paths.

Q: How do I update an installed component?
A: Inspect the latest registry item or repository source, compare it with your local file, and merge the changes you need.