A collection of beautiful, animated components built with GSAP, Motion, and Radix UI.
Tailored for modern Next.js applications and compatible with shadcn/ui.
GSAP UI bridges the gap between high-performance animations and accessible, headless primitives. It provides a set of meaningful, copy-paste components that you can drop directly into your project.
Unlike traditional component libraries that lock you into an API, GSAP UI gives you the code. You own it, you customize it.
- 🎨 Beautiful Mutations: Powered by GSAP for fluid, industry-standard animations.
- ♿ Accessible Primitives: Built on Radix UI to ensure full accessibility and keyboard navigation.
- 🧱 Shadcn Compatible: Designed to integrate seamlessly with standard shadcn/ui setups.
- 🛠️ Zero Lock-in: Copy the code, own the component. No heavy monolith dependency.
- ⚡ Modern Stack: Fully typed TypeScript components for Next.js 15+.
We stand on the shoulders of giants:
| Technology | Purpose |
|---|---|
| Next.js 15 | The React Framework for the Web |
| Tailwind CSS | Utility-first CSS framework |
| GSAP | Professional-grade animation library |
| Radix UI | Unstyled, accessible components |
| Lucide | Beautiful & consistent icons |
This library is designed to work with the shadcn CLI. You can add components directly to your project using the remote registry.
Ensure you have the necessary dependencies in your project:
npm install gsap @gsap/react motion clsx tailwind-merge lucide-reactTo add a component to your project, run the following command using the component's ID:
npx shadcn@latest add https://gsap-ui.shrid.in/registry/[component-name].jsonFor example, to add the magnetic-button:
npx shadcn@latest add https://gsap-ui.shrid.in/registry/magnetic-button.jsonThe component will be placed in your components/ui directory, ready to use and customize.
If you want to contribute or explore the components locally:
-
Clone the repository
git clone https://github.com/shridmishra/gsap-ui.git cd gsap-ui -
Install dependencies
npm install
-
Run the development server
npm run dev
Open http://localhost:3000 with your browser to see the documentation site.
We believe animations should be meaningful, performant, and delightful. By combining the declarative power of React with the imperative precision of GSAP, we create interfaces that feel alive without sacrificing accessibility or control.