@spark-ui

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

18 components react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://spark-ui-olive.vercel.app/r/registry.json

pnpm pnpm dlx shadcn@latest add https://spark-ui-olive.vercel.app/r/registry.json

bun bunx shadcn@latest add https://spark-ui-olive.vercel.app/r/registry.json

fetch registry curl -s https://spark-ui-olive.vercel.app/r/registry.json

Components

18 total

Widget Stack 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 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 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 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 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 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 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 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 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 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 component

Right scrolling Logo Carousel demo.

npx shadcn@latest add https://spark-ui-olive.vercel.app/r/logo-carousel-right.json

Image Trail 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 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 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 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 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 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 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