Skiper UI
70+ animated shadcn/ui components for Next.js

- Documentation
- Copy & Paste
What Is the Skiper UI?
Skiper UI is a collection of polished, animation-friendly React components built on top of shadcn/ui—aimed at Next.js projects. You can add pieces via the shadcn CLI or copy code, then tweak styles like any Tailwind component. It focuses on smooth scroll effects, interactive cards, and modern micro-interactions.
Features ✨
70+ components (free + premium) focused on motion and polish
Built on shadcn/ui; works naturally with Tailwind & Radix UI patterns
Easy install via
npx shadcn add @skiper-ui/skiper40
Copy-paste source for Pro components (downloadable .tsx)
Scroll/hover/entrance animations powered by framer-motion/GSAP
One-time pricing; lifetime updates on paid tiers
Included Components 📒
Animated cards, hero sections, galleries, marquee/scroll sections
Menus, navs, drawers aligned with shadcn/ui patterns
Form bits, inputs, badges, tooltip/popover patterns
Landing page sections tailored for Next.js marketing pages
Pros and Cons
Pros ✅
Smooth, production-ready motion out of the box (less tinkering)
shadcn CLI flow makes adding components straightforward
Copy-paste code ownership (no runtime lock-in)
Clear one-time pricing with lifetime updates on paid plans
Cons ⚠️
Best fit is React/Next.js; other stacks aren’t first-class targets
Some components are premium-only; free users must attribute
Motion-heavy sections can add weight if you don’t tree-shake framer-motion/GSAP well
Integration
Framework: Next.js (App Router friendly)
UI Base: shadcn/ui conventions & registry integration
Styling: Tailwind CSS utilities and
cn()
helper with tailwind-mergeAnimation: framer-motion, GSAP (select components)
Icons: lucide-react
FAQ
Is it suitable if I only need a few blocks?
Yes, use the CLI to add a single component or copy code from Pro; you don’t need the whole kit.
Do I have to keep a dependency at runtime?
No. You copy the source into your repo, so you own the code (respect license terms).
What’s the pricing model?
One-time payment tiers (Premium/Exclusive) with lifetime updates; some items marked “coming soon.”
Can I use it without animations?
You can, but many components shine with motion; remove or simplify framer-motion where needed.