Spell UI

GitHub
Open GithubSign in
Back

Getting Started with Spell UI: Setup and First Components

Learn how to install Spell UI, configure it with React and Tailwind CSS, and add your first animated components to a project in a few minutes.

·1 min read·Guide
Getting Started with Spell UI: Setup and First Components

Introduction

Spell UI is a collection of animated UI components for React and Tailwind CSS. This guide covers setup and first use.

Installation

Install components directly using the shadcn/ui CLI:

npx shadcn@latest add "https://spell.sh/docs/tilt-card.md"

What Makes Spell UI Different

Spell UI ships interactive components with smooth animations powered by Motion. Each component is:

  • Copy-paste friendly - No heavy dependencies, just copy the code
  • Customizable - Built with Tailwind CSS for easy theming
  • Accessible - Follows web accessibility standards
  • Performant - Targets smooth 60fps animations

Next Steps

Browse the component documentation to see all available components.

More Articles

How to Create an Animated Landing Page with React

A practical guide to adding entrance animations, scroll-triggered reveals, and micro-interactions to your React landing page. Covers CSS, Motion, and component libraries.

15 Best React Animation Libraries Compared (2025)

A practical comparison of the top React animation libraries — Motion (formerly Framer Motion), React Spring, GSAP, and more. Find the right tool for your project.

25 Best SaaS Landing Pages for Design Inspiration

A curated list of 25 outstanding SaaS landing pages with analysis of what makes each one effective. From Vercel to Linear, learn from the best in the industry.