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.
Introduction
Spell UI is a collection of animated UI components for React and Tailwind CSS. This guide covers setup and first use. If you're weighing it against alternatives, our Tailwind component libraries comparison and breakdown of shadcn/ui are good reference points.
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 — see our practical Motion guide for an overview of the underlying library. 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, or read our walkthrough on animating a React landing page to see how the components fit together in a real layout.