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-merge
- Animation: 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.