Dev Design Library

Spell UI components

A large collection of high-quality React components that you can copy and paste into any project.

Components
33
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
1,330
Source
https://github.com/xxtomm/spell-ui
Website
https://spell.sh
Install
npx shadcn@latest add "https://spell.sh/docs/{name}.md"

All Spell UI components

  • Animated Checkbox: Animated checkbox with spring transitions and strike-through text effect.
  • Animated Gradient: Animated gradient background with presets and customizable swirl effects using WebGL.
  • Badge: A badge component with multiple color variants and sizes.
  • Bars Spinner: A loading spinner with rotating bars animation.
  • Blur Reveal: Animated text reveal with blur effect.
  • Chart: Interactive line chart with a cursor-tracked tooltip card, snap-to-point hover, and built-in X-axis labels.
  • Color Selector: Interactive color picker component.
  • Copy Button: A copy-to-clipboard button with blur transition effect.
  • Exploding Input: Input component that spawns particle effects when typing.
  • Fallback Avatar: A unique gradient avatar generated from a name string.
  • Flow Button: A button with animated flowing dashed border on hover.
  • Gradient Wave Text: Apple-style animated gradient text with wave effect.
  • Highlighted Text: Text with sliding background highlight animation using mix-blend-mode.
  • Keyboard Shortcuts: Display keyboard shortcuts with proper key symbols.
  • Label Input: Input field with floating label and password visibility toggle.
  • Light Rays: Animated light rays effect using WebGL shaders.
  • Logos Carousel: Animated carousel component that cycles through sets of logos with staggered animations.
  • Marquee: Infinite scrolling marquee component with customizable speed and direction.
  • Perspective Book: A 3D book component with hover animation and customizable appearance.
  • Pop Button: A playful 3D-style button with push-down animation effect.
  • QR Code: QR code generator with rounded finder patterns and dot-style data modules.
  • Randomized Text: Text component with randomized character reveal animation.
  • Rich Button: A button component with rich styling and color variants.
  • Shimmer Text: Text with animated shimmer highlight effect.
  • Signature: Animated signature component with handwriting effect using custom fonts.
  • Slide Up Text: Text animation that slides up from bottom with stagger effect.
  • Special Text: Animated text with scramble effect.
  • Spinner: A loading spinner component with customizable size and color.
  • Spotify Card: Display Spotify tracks with album art and blurred background.
  • Text Marquee: Animated text marquee component with vertical scrolling.
  • Tilt Card: Interactive 3D tilt card with perspective hover effect and spotlight.
  • Tweet: Embed Twitter/X posts with custom styling.
  • Words Stagger: Word-by-word text animation with blur, transform, and opacity effects.

Browse by category