---
name: "@spark-ui"
slug: "spark-ui"
description: "Open-source React components and animated UI building blocks, installable as source with the shadcn CLI."
category: "Animated components"
tags: ["animation", "backgrounds", "blocks", "cards", "icons", "loaders", "media"]
framework: "react"
license: "MIT"
author: "codeweb-dev"
website: "https://spark-ui-olive.vercel.app"
github: "https://github.com/codeweb-dev/spark-ui"
registry: "https://spark-ui-olive.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 57
component_count: 18
generated_at: "2026-09-21T01:50:16.753Z"
---

# @spark-ui

Open-source React components and animated UI building blocks, installable as source with the shadcn CLI.

## Links

- Website: https://spark-ui-olive.vercel.app
- GitHub: https://github.com/codeweb-dev/spark-ui
- Registry JSON: https://spark-ui-olive.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/spark-ui
- This file: https://sh4dcn.vercel.app/md/spark-ui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://spark-ui-olive.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://spark-ui-olive.vercel.app/r/registry.json
bunx shadcn@latest add https://spark-ui-olive.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/codeweb-dev/spark-ui.git
# fetch the raw registry index
curl -s https://spark-ui-olive.vercel.app/r/registry.json
```

## Components (18)

| name | type | description | install |
| --- | --- | --- | --- |
| widget-stack | registry:component | A stack of small or medium widgets with vertical snap scrolling and page dots. | `npx shadcn@latest add https://spark-ui-olive.vercel.app/r/widget-stack.json` |
| dynamic-island | registry:component | A functional iPhone-inspired island that morphs between compact and expanded content. | `npx shadcn@latest add https://spark-ui-olive.vercel.app/r/dynamic-island.json` |
| tactile-highlight | registry:component | A fluid text highlight component that reacts to viewport visibility and user interaction. | `npx shadcn@latest add https://spark-ui-olive.vercel.app/r/tactile-highlight.json` |
| spotify-card | registry:component | A premium Spotify card with real-time metadata and morphing animations. | `npx shadcn@latest add https://spark-ui-olive.vercel.app/r/spotify-card.json` |
| shimmer-text | registry:component | A premium text component with an elegant shimmer animation effect. | `npx shadcn@latest add https://spark-ui-olive.vercel.app/r/shimmer-text.json` |
| basic-number-ticker | registry:component | An animated number ticker component with customizable start, target, transitions, and callbacks. | `npx shadcn@latest add https://spark-ui-olive.vercel.app/r/basic-number-ticker.json` |
| qr-code | registry:component | A beautiful QR code component with dot styling, gradient support, and extensive color customization. | `npx shadcn@latest add https://spark-ui-olive.vercel.app/r/qr-code.json` |
| animated-gradient | registry:component | WebGL-powered animated mist, lava, and plasma backgrounds with smooth silk-like flowing streams. | `npx shadcn@latest add https://spark-ui-olive.vercel.app/r/animated-gradient.json` |
| ghost-ether | registry:component | WebGL-powered interactive fluid simulation with dynamic FBM mist and wandering spirit force trails using three. | `npx shadcn@latest add https://spark-ui-olive.vercel.app/r/ghost-ether.json` |
| logo-carousel | registry:component | A beautiful, high-performance scrolling logo carousel component with pausing, custom directions, speed, and fade effects. | `npx shadcn@latest add https://spark-ui-olive.vercel.app/r/logo-carousel.json` |
| logo-carousel-right | registry:component | Right scrolling Logo Carousel demo. | `npx shadcn@latest add https://spark-ui-olive.vercel.app/r/logo-carousel-right.json` |
| image-trail | registry:component | A framed mouse-tracking image trail with momentum, captions, and customizable styling. | `npx shadcn@latest add https://spark-ui-olive.vercel.app/r/image-trail.json` |
| masonry | registry:component | An animated masonry grid that lays out image items by explicit height, with configurable entry and hover animations. | `npx shadcn@latest add https://spark-ui-olive.vercel.app/r/masonry.json` |
| keyboard | registry:component | A two-tone mechanical keyboard with 3D press animations and physical key highlighting. | `npx shadcn@latest add https://spark-ui-olive.vercel.app/r/keyboard.json` |
| hello | registry:component | An Apple-style welcome greeting that cycles through languages with a soft blur crossfade. | `npx shadcn@latest add https://spark-ui-olive.vercel.app/r/hello.json` |
| receipt | registry:component | A polished payment receipt with ticket details, card information, and a decorative barcode. | `npx shadcn@latest add https://spark-ui-olive.vercel.app/r/receipt.json` |
| interactive-pets | registry:component | A playful draggable cat with feeding reactions and idle animations. | `npx shadcn@latest add https://spark-ui-olive.vercel.app/r/interactive-pets.json` |
| interactive-pets-demo | registry:component | Demo of the Interactive Pets playground with custom messages and an event log. | `npx shadcn@latest add https://spark-ui-olive.vercel.app/r/interactive-pets-demo.json` |

## For AI agents

```text
You are adding components from @spark-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/spark-ui.md) for the component list.
2. Fetch the machine-readable index: https://spark-ui-olive.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: spark-ui).
```