Beautiful, sophisticated UI components for modern SvelteKit and Tailwind CSS applications.
Spelte is a Svelte port of Spell UI by Tom — a collection of beautiful, copy-ready UI components. All credit for the original design and component concepts goes to the Spell UI team.
Changes from the original:
- Ported from React/Next.js to SvelteKit with Svelte 5 runes
- Uses shadcn-svelte registry format
- Uses mdsx for markdown processing
- Orange Svelte logo (
--svelte-orange) - No GitHub sign-in, no sponsor references
Visit the docs to browse all available components.
Components are installed individually via the shadcn-svelte CLI:
pnpm dlx shadcn-svelte@latest add @spelte/<component-name>| Component | Description |
|---|---|
blur-reveal |
Animated text reveal with blur effect |
perspective-book |
3D book with hover animation |
badge |
Badge with multiple color variants |
rich-button |
Button with rich styling and color variants |
light-rays |
Animated light rays via WebGL |
animated-gradient |
Animated gradient background via WebGL |
spinner |
Loading spinner with size and speed variants |
bars-spinner |
Loading spinner with rotating bars |
flow-button |
Button with animated flowing dashed border |
pop-button |
Playful 3D-style push-down button |
copy-button |
Copy-to-clipboard with blur transition |
animated-checkbox |
Checkbox with spring transitions |
exploding-input |
Input with particle effects on typing |
label-input |
Input with floating label |
color-selector |
Interactive color picker |
shimmer-text |
Text with shimmer animation |
highlighted-text |
Text with sliding background highlight |
slide-up-text |
Text that slides up with stagger |
words-stagger |
Word-by-word blur and fade animation |
special-text |
Scramble text reveal animation |
randomized-text |
Randomized character reveal |
gradient-wave-text |
Apple-style animated gradient text |
text-marquee |
Vertical scrolling text marquee |
marquee |
Infinite scrolling marquee |
tilt-card |
3D tilt card with spotlight |
logos-carousel |
Animated logo carousel |
fallback-avatar |
Unique WebGL gradient avatar from a name |
qr-code |
QR code with rounded finder patterns |
signature |
Animated handwriting signature |
spotify-card |
Spotify track card with audio preview |
kbd |
Keyboard shortcut display |
chart |
Interactive line chart with tooltip |
Spelte is a port of Spell UI — all original design, component concepts, and visual ideas are by Tom (@tomm_ui). Please star the original repo if you find this useful.
Built with:
Licensed under the MIT license.