Introduction
Zenora UI is a Premium Open-Source Animated Component Library Platform for React & Next.js. Build stunning, interactive UIs powered by GSAP, Framer Motion, and Three.js.
What is Zenora UI
Every component in the library is a single, self-contained .tsx file built with advanced motion engines including GSAP (ScrollTrigger), Framer Motion, and Three.js / React Three Fiber. There’s no wrapper package to install and no runtime dependency on Zenora UI itself. When you add a component, that file becomes part of your codebase, the same way it would if you’d written it yourself.
Each component ships with a full set of props for customization (colors, fonts, text, images, and animation speed), so what you get out of the box is rarely what you ship. You’re expected to make it yours with our high-performance utility styling built on Tailwind CSS v4.
Credits & Attribution
Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate and often add a few extra features, customization options and clean TypeScript code.
I've tried to credit everyone, but if I missed something or if you'd like attribution updated, please reach out and let me know.
Why Zenora UI
- Modern Framework Tech Stack: Built with Next.js 16+ (App Router), React 19, and TypeScript 5.
- Advanced Motion Engines: Integrated with GSAP (ScrollTrigger), Framer Motion, and Three.js / React Three Fiber.
- Tailwind CSS v4: High-performance utility styling with native CSS Variables for instant dark/light mode switching.
- Automated CLI & Registry Pipeline: Scaffold new components and auto-generate clean code snippets using CLI scripts.
- Interactive Playground: Embedded code generator and live previews for all library components.
- SEO & Performance Optimized: Pre-built JSON-LD schema integration (ItemList, FAQPage) and 60fps hardware-accelerated animations.
- An MCP server, so agents like Claude can search the library and pull a component, customized to spec, straight into your project.
Prerequisites
Components are plain React, so they’ll run anywhere React does. A couple of things to have in place:
- React 19 or newer and Next.js 16+ (App Router) recommended.
- Tailwind CSS v4 configured in your project, since components are styled with native CSS Variables and utility classes.
gsap,framer-motionorthreedepending on the component you select. The automated CLI will install whatever a given component actually needs, nothing more.
Quick start
Three ways in, depending on how hands-on you want to be.
1. CLI
Writes the component into your project, downloads the images it references, and installs the packages it imports.
npx zenora-ui-registry@latest add luma-login-card
See everything available:
npx zenora-ui-registry@latest list
2. Browse and copy
Open any component’s page, tune it in the live customizer, then copy the source or download the file directly.
3. MCP
Connect the registry to Claude Code or another MCP client and ask for what you need.
claude mcp add --transport http zenora-ui https://www.zenora-ui.in/api/mcp
Troubleshooting & FAQ
Hydration Mismatch Warning in Next.js App Router?
This usually happens if a component reads window dimensions (window.innerWidth) or generates random numbers on initial render. Make sure window measurements take place inside a useEffect or set state after mount.
GSAP ScrollTrigger animations don't align after route changes?
When navigating between routes in Next.js, call ScrollTrigger.refresh() after the new page mounts to recalculate element offsets and trigger positions accurately.
How to request or contribute a new component?
Reach out via LinkedIn or email (krishkli536@gmail.com) to propose new component ideas, report bugs, or request custom animation variants.
Next steps
Ready to explore the Component Gallery?
Browse our curated collection of interactive UI components, inspect interactive previews, and copy production-ready code.