# Spell UI

> Refined, copy-paste React and Tailwind CSS components with micro-interactions

Spell UI is an open source collection of polished React and Tailwind CSS components built for modern web apps and landing pages. It provides animated micro-interactions and creative UI elements—such as interactive cards, dynamic inputs, and gradient effects—that you can copy and paste directly into your project.

Website: https://spell.sh/

Also at: https://github.com/xxtomm/spell-ui

## What it is for

- Add animated micro-interactions to modern landing pages
- Copy and paste pre-styled React UI elements into Tailwind CSS projects
- Enhance web applications with creative visual effects like light rays and animated gradients

## Features

- Copy-and-paste integration workflow without heavy package lock-in
- Built with React, Next.js, Framer Motion, and Tailwind CSS
- Micro-interaction elements like Pop Button and Exploding Input
- Visual background effects including Light Rays and Animated Gradients
- Creative display cards such as Perspective Book and Spotify Card
- MCP integration support

## Pricing

Open source. Free and open source

## Details

- Type: GitHub repo
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Web, Code library
- For: Design engineers, front-end developers, and Next.js creators
- Alternative to: Aceternity UI, Magic UI, shadcn/ui
- Tags: react, tailwind, framer motion, nextjs, ui components, micro interactions

## Why it was saved

- [@tomm_ui, 5 March 2026](https://x.com/tomm_ui/status/2029502240709550311): Ready-made, well-crafted components to drop into products.
- [@voidyaps, 23 September 2026](https://x.com/voidyaps/status/2102817538229063855): Listed as a top UI design / micro-interaction resource.
- [@ErfanEbrahimnia, 7 September 2026](https://x.com/ErfanEbrahimnia/status/2097034887563817294): Ready-made, polished animated components (light rays, gradients, buttons, inputs, cards) for design engineers.

## Compare

- [Alternatives to Aceternity UI](https://xiry.app/alternatives/aceternity-ui.md)
- [Alternatives to Magic UI](https://xiry.app/alternatives/magic-ui.md)
- [Alternatives to shadcn/ui](https://xiry.app/alternatives/shadcn-ui.md)

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 11 October 2026. Page: https://xiry.app/resources/spell-ui

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.