---
name: "@spell"
slug: "spell"
description: "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."
category: "Animated components"
tags: ["accessibility", "aesthetic", "animation", "backgrounds", "buttons", "cards", "charts", "forms", "icons", "loaders", "media", "tables"]
framework: "react"
license: "MIT"
author: "xxtomm"
website: "https://spell.sh"
github: "https://github.com/xxtomm/spell-ui"
registry: "https://spell.sh/r/registry.json"
pro: false
pro_url: null
github_stars: 1022
component_count: 33
generated_at: "2026-07-28T08:00:50.948Z"
---

# @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.

## Links

- Website: https://spell.sh
- GitHub: https://github.com/xxtomm/spell-ui
- Registry JSON: https://spell.sh/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/spell
- This file: https://sh4dcn.vercel.app/md/spell.md

## Install

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

## Components (33)

| name | type | description | install |
| --- | --- | --- | --- |
| chart | registry: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 | registry:component | Animated text reveal with blur effect. | `npx shadcn@latest add https://spell.sh/r/blur-reveal.json` |
| perspective-book | registry:component | A 3D book component with hover animation and customizable appearance. | `npx shadcn@latest add https://spell.sh/r/perspective-book.json` |
| badge | registry:component | A badge component with multiple color variants and sizes. | `npx shadcn@latest add https://spell.sh/r/badge.json` |
| color-selector | registry:component | Interactive color picker component. | `npx shadcn@latest add https://spell.sh/r/color-selector.json` |
| special-text | registry:component | Animated text with scramble effect. | `npx shadcn@latest add https://spell.sh/r/special-text.json` |
| shimmer-text | registry:component | Text with animated shimmer highlight effect. | `npx shadcn@latest add https://spell.sh/r/shimmer-text.json` |
| highlighted-text | registry:component | Text with sliding background highlight animation using mix-blend-mode. | `npx shadcn@latest add https://spell.sh/r/highlighted-text.json` |
| rich-button | registry:component | A button component with rich styling and color variants. | `npx shadcn@latest add https://spell.sh/r/rich-button.json` |
| kbd | registry:component | Display keyboard shortcuts with proper key symbols. | `npx shadcn@latest add https://spell.sh/r/kbd.json` |
| label-input | registry:component | Input field with floating label and password visibility toggle. | `npx shadcn@latest add https://spell.sh/r/label-input.json` |
| spinner | registry:component | A loading spinner component with customizable size and color. | `npx shadcn@latest add https://spell.sh/r/spinner.json` |
| bars-spinner | registry:component | A loading spinner with rotating bars animation. | `npx shadcn@latest add https://spell.sh/r/bars-spinner.json` |
| flow-button | registry:component | A button with animated flowing dashed border on hover. | `npx shadcn@latest add https://spell.sh/r/flow-button.json` |
| slide-up-text | registry: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 | registry:component | A copy-to-clipboard button with blur transition effect. | `npx shadcn@latest add https://spell.sh/r/copy-button.json` |
| text-marquee | registry:component | Animated text marquee component with vertical scrolling. | `npx shadcn@latest add https://spell.sh/r/text-marquee.json` |
| words-stagger | registry: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 | registry:component | Interactive 3D tilt card with perspective hover effect and spotlight. | `npx shadcn@latest add https://spell.sh/r/tilt-card.json` |
| marquee | registry:component | Infinite scrolling marquee component with customizable speed and direction. | `npx shadcn@latest add https://spell.sh/r/marquee.json` |
| signature | registry:component | Animated signature component with handwriting effect using custom fonts. | `npx shadcn@latest add https://spell.sh/r/signature.json` |
| randomized-text | registry:component | Text component with randomized character reveal animation. | `npx shadcn@latest add https://spell.sh/r/randomized-text.json` |
| pop-button | registry:component | A playful 3D-style button with push-down animation effect. | `npx shadcn@latest add https://spell.sh/r/pop-button.json` |
| tweet | registry:component | Embed Twitter/X posts with custom styling. | `npx shadcn@latest add https://spell.sh/r/tweet.json` |
| spotify-card | registry:component | Display Spotify tracks with album art and blurred background. | `npx shadcn@latest add https://spell.sh/r/spotify-card.json` |
| light-rays | registry:component | Animated light rays effect using WebGL shaders. | `npx shadcn@latest add https://spell.sh/r/light-rays.json` |
| animated-gradient | registry: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 | registry:component | Animated checkbox with spring transitions and strike-through text effect. | `npx shadcn@latest add https://spell.sh/r/animated-checkbox.json` |
| exploding-input | registry:component | Input component that spawns particle effects when typing. | `npx shadcn@latest add https://spell.sh/r/exploding-input.json` |
| gradient-wave-text | registry:component | Apple-style animated gradient text with wave effect. | `npx shadcn@latest add https://spell.sh/r/gradient-wave-text.json` |
| logos-carousel | registry: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 | registry: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 | registry:component | A unique gradient avatar generated from a name string. | `npx shadcn@latest add https://spell.sh/r/fallback-avatar.json` |

## For AI agents

```text
You are adding components from @spell to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/spell.md) for the component list.
2. Fetch the machine-readable index: https://spell.sh/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: spell).
```