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