@spell

A growing collection of high-quality animated React UI components for design engineers, built with Tailwind CSS and distributed via the shadcn registry. Notable components seen include Light Rays, Perspective Book, Exploding Input, Spotify Card, Pop Button, Signature, Animated Gradient, and Button variants. Targets design-engineer aesthetic with sophisticated visual effects. Open-source (MIT) with a Discord community. Use for: incorporating distinctive, visually sophisticated interaction patterns — animated inputs, layered card effects, gradient animations — into a React/Next.js project where design quality is a differentiator.

33 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://spell.sh/r/registry.json

pnpm pnpm dlx shadcn@latest add https://spell.sh/r/registry.json

bun bunx shadcn@latest add https://spell.sh/r/registry.json

fetch registry curl -s https://spell.sh/r/registry.json

Components

33 total

Chart component

Interactive line chart with a cursor-tracked tooltip card, snap-to-point hover, and built-in X-axis labels.

npx shadcn@latest add https://spell.sh/r/chart.json

Blur Reveal component

Animated text reveal with blur effect.

npx shadcn@latest add https://spell.sh/r/blur-reveal.json

Perspective Book component

A 3D book component with hover animation and customizable appearance.

npx shadcn@latest add https://spell.sh/r/perspective-book.json

Badge component

A badge component with multiple color variants and sizes.

npx shadcn@latest add https://spell.sh/r/badge.json

Color Selector component

Interactive color picker component.

npx shadcn@latest add https://spell.sh/r/color-selector.json

Special Text component

Animated text with scramble effect.

npx shadcn@latest add https://spell.sh/r/special-text.json

Shimmer Text component

Text with animated shimmer highlight effect.

npx shadcn@latest add https://spell.sh/r/shimmer-text.json

Highlighted Text component

Text with sliding background highlight animation using mix-blend-mode.

npx shadcn@latest add https://spell.sh/r/highlighted-text.json

Rich Button component

A button component with rich styling and color variants.

npx shadcn@latest add https://spell.sh/r/rich-button.json

Keyboard Shortcuts component

Display keyboard shortcuts with proper key symbols.

npx shadcn@latest add https://spell.sh/r/kbd.json

Label Input component

Input field with floating label and password visibility toggle.

npx shadcn@latest add https://spell.sh/r/label-input.json

Spinner component

A loading spinner component with customizable size and color.

npx shadcn@latest add https://spell.sh/r/spinner.json

Bars Spinner component

A loading spinner with rotating bars animation.

npx shadcn@latest add https://spell.sh/r/bars-spinner.json

Flow Button component

A button with animated flowing dashed border on hover.

npx shadcn@latest add https://spell.sh/r/flow-button.json

Slide Up Text component

Text animation that slides up from bottom with stagger effect.

npx shadcn@latest add https://spell.sh/r/slide-up-text.json

Copy Button component

A copy-to-clipboard button with blur transition effect.

npx shadcn@latest add https://spell.sh/r/copy-button.json

Text Marquee component

Animated text marquee component with vertical scrolling.

npx shadcn@latest add https://spell.sh/r/text-marquee.json

Words Stagger component

Word-by-word text animation with blur, transform, and opacity effects.

npx shadcn@latest add https://spell.sh/r/words-stagger.json

Tilt Card component

Interactive 3D tilt card with perspective hover effect and spotlight.

npx shadcn@latest add https://spell.sh/r/tilt-card.json

Marquee component

Infinite scrolling marquee component with customizable speed and direction.

npx shadcn@latest add https://spell.sh/r/marquee.json

Signature component

Animated signature component with handwriting effect using custom fonts.

npx shadcn@latest add https://spell.sh/r/signature.json

Randomized Text component

Text component with randomized character reveal animation.

npx shadcn@latest add https://spell.sh/r/randomized-text.json

Pop Button component

A playful 3D-style button with push-down animation effect.

npx shadcn@latest add https://spell.sh/r/pop-button.json

Tweet component

Embed Twitter/X posts with custom styling.

npx shadcn@latest add https://spell.sh/r/tweet.json

Spotify Card component

Display Spotify tracks with album art and blurred background.

npx shadcn@latest add https://spell.sh/r/spotify-card.json

Light Rays component

Animated light rays effect using WebGL shaders.

npx shadcn@latest add https://spell.sh/r/light-rays.json

Animated Gradient component

Animated gradient background with presets and customizable swirl effects using WebGL.

npx shadcn@latest add https://spell.sh/r/animated-gradient.json

Animated Checkbox component

Animated checkbox with spring transitions and strike-through text effect.

npx shadcn@latest add https://spell.sh/r/animated-checkbox.json

Exploding Input component

Input component that spawns particle effects when typing.

npx shadcn@latest add https://spell.sh/r/exploding-input.json

Gradient Wave Text component

Apple-style animated gradient text with wave effect.

npx shadcn@latest add https://spell.sh/r/gradient-wave-text.json

Logos Carousel component

Animated carousel component that cycles through sets of logos with staggered animations.

npx shadcn@latest add https://spell.sh/r/logos-carousel.json

QR Code component

QR code generator with rounded finder patterns and dot-style data modules.

npx shadcn@latest add https://spell.sh/r/qr-code.json

Fallback Avatar component

A unique gradient avatar generated from a name string.

npx shadcn@latest add https://spell.sh/r/fallback-avatar.json