Docs / Introduction
Make your product feel alive with animated components that you can copy and paste into your apps.
Planes is a collection of animated React components — interactions, heroes, and full page templates for product UIs and landing pages that need to feel considered.
Every component is built with Motion and Tailwind, and installs as plain source through the shadcn registry — you own the code the moment it lands in your project.
Philosophy
“In a world of scarcity, we treasure tools.
In a world of abundance, we treasure taste.”
I believe motion is one of the main ways software earns trust. Before a visitor reads your copy or tries your product, they feel how it moves. That first impression forms in milliseconds, long before any feature list gets a chance to argue.
Some questions people ask themselves without noticing:
- “Is this app actually fast?”
- “Will something break if I tap this?”
- “Did anyone sweat the details here?”
Janky motion reflects poorly on your product. Elements that snap into place, hovers that flicker, transitions that can't be interrupted — it all reads as unfinished, and it makes people brace before every click.
Good motion signals that the team has their act together. When a card settles with real weight and a gesture responds mid-flight, I think: "if they cared this much about a hover state, they probably care about everything else too — including their customers."
The apps I keep coming back to — Linear, Family, anything Apple ships — all share this quality: nothing snaps, everything settles. That is the feel Planes is chasing. Springs over duration curves, interruptible over choreographed, and every component respects reduced motion so the polish never comes at anyone's expense.
This library is heavily inspired by ui.shadcn.com and animations.dev.
Free and Pro
Free components install with a single command and no account. Pro components — the larger pieces like the command palette, AI chat, and page templates — require a Planes Pro license: a one-time payment with lifetime access. The Installation page covers both flows.