Registries
ActiveFeaturedAnimated components1,022

@spell

Animated components · MIT · data updated 2026-07-08

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.

WebsiteDocsGitHubComponents folder

Install

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

Health

StatusActive
Last commit2 weeks ago
LicenseMIT
Open issues0
ArchivedNo
Stars1,022

Components (33)

chartblur-revealperspective-bookbadgecolor-selectorspecial-textshimmer-texthighlighted-textrich-buttonkbdlabel-inputspinnerbars-spinnerflow-buttonslide-up-textcopy-buttontext-marqueewords-staggertilt-cardmarqueesignaturerandomized-textpop-buttontweetspotify-cardlight-raysanimated-gradientanimated-checkboxexploding-inputgradient-wave-textlogos-carouselqr-codefallback-avatar
Components: chart, blur-reveal, perspective-book, badge, color-selector, special-text, shimmer-text, highlighted-text, rich-button, kbd, label-input, spinner, bars-spinner, flow-button, slide-up-text, copy-button, text-marquee, words-stagger, tilt-card, marquee, signature, randomized-text, pop-button, tweet, spotify-card, light-rays, animated-gradient, animated-checkbox, exploding-input, gradient-wave-text, logos-carousel, qr-code, fallback-avatar

Preview

Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.

@spell · chart

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