Motion-driven UI components for React & Next.js
Built on Framer Motion · Styled with Tailwind CSS · Installed via shadcn/ui
Kinetic is a production-ready UI component toolkit where every component moves. Browse, preview, copy, and install animated React components built on top of Framer Motion and Tailwind CSS — from motion primitives to full interactive blocks.
- 🎬 100+ animated components — buttons, inputs, modals, drawers, carousels, tables, and more
- 🎨 Animated icons — a full set of purposeful micro-animated SVG icons
- 🧱 Full UI blocks — wallet cards, command palettes, prediction markets, knockout brackets, swap interfaces, and more
- ⚡ One-line install — copy any component with
npx shadcn add - 🛝 Interactive playground — tweak spring, tween, and stagger configs live
- 🌗 Dark mode — every component supports it out of the box
- 🤖 AI-agent ready — MCP server + registry endpoints for Cursor, Claude, Amp, and Codex
| Category | Description |
|---|---|
| Motion | Core animated primitives — inputs, buttons, selects, modals, tooltips, tabs, sliders |
| Blocks | Fully composed product-ready widgets — wallet card, swap UI, command palette, OTP input |
| AI | Components built for AI products — streaming text, agent input, chat bubbles, tool cards |
| Icons (Animated) | Micro-animated icons — bell, spinner, heart, bookmark, sparkle, trash, and 30+ more |
| Icons (Static) | A complete static icon set across 15 categories |
npx shadcn@latest add https://kinetic.dev/r/tilt-card# 1. Make sure you have shadcn set up
npx shadcn@latest init
# 2. Add any Kinetic component
npx shadcn@latest add https://kinetic.dev/r/<component-slug>npx shadcn@latest add https://kinetic.dev/r/button
npx shadcn@latest add https://kinetic.dev/r/dialog
npx shadcn@latest add https://kinetic.dev/r/drawer
npx shadcn@latest add https://kinetic.dev/r/tilt-card
npx shadcn@latest add https://kinetic.dev/r/morphing-modal
npx shadcn@latest add https://kinetic.dev/r/text-scramble
npx shadcn@latest add https://kinetic.dev/r/dock
npx shadcn@latest add https://kinetic.dev/r/command-palette
npx shadcn@latest add https://kinetic.dev/r/wallet-card
npx shadcn@latest add https://kinetic.dev/r/confetti| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Animation | Framer Motion 12 |
| Styling | Tailwind CSS 4 |
| Components | shadcn/ui |
| Language | TypeScript 5.9 |
| Database | PostgreSQL + Drizzle ORM |
| Auth | Custom session-based auth |
| Payments | DodoPayments |
| Package Manager | pnpm workspaces |
kinetic/
├── artifacts/
│ ├── kinetic/ # Main Next.js web app
│ │ ├── app/ # App Router pages & API routes
│ │ ├── components/
│ │ │ ├── motion/ # All animated components ← the gold
│ │ │ ├── icons/ # Animated + static icon sets
│ │ │ ├── ai/ # AI-focused components
│ │ │ └── app/ # Site shell (nav, auth, docs UI)
│ │ └── lib/ # Registry, theme, auth, utilities
│ └── api-server/ # Express API (auth, storage, community)
├── lib/
│ ├── db/ # Drizzle schema & migrations
│ ├── api-spec/ # OpenAPI contract
│ └── api-client-react/ # Generated React Query hooks
└── README.md
- Node.js 20+
- pnpm 9+
- PostgreSQL database
# 1. Clone the repo
git clone https://github.com/Wooinxlkz/kinetic.git
cd kinetic
# 2. Install dependencies
pnpm install
# 3. Set up environment variables
cp .env.example .env
# Fill in: DATABASE_URL, SESSION_SECRET, DODO_PAYMENTS_API_KEY, etc.
# 4. Push the database schema
pnpm --filter @workspace/db run push
# 5. Start the apps
pnpm --filter @workspace/kinetic run dev # Web app → localhost:3000
pnpm --filter @workspace/api-server run dev # API → localhost:5000Kinetic exposes a full MCP server and REST registry so AI coding agents can list, search, and install components directly into your project.
{
"mcpServers": {
"kinetic": {
"type": "http",
"url": "https://kinetic.dev/api/mcp"
}
}
}GET https://kinetic.dev/r # List all components
GET https://kinetic.dev/r/<slug>.json # shadcn registry format
GET https://kinetic.dev/r/<slug>/raw # Raw source with all imports
GET https://kinetic.dev/registry.json # Full registry manifest
GET https://kinetic.dev/llms.txt # LLM-friendly component listThis project is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0).
This means:
- ✅ You can view, fork, and learn from this code
- ✅ You can use it in open-source projects
⚠️ If you run a modified version as a service, you must release your source code- ❌ You cannot use it in closed-source commercial products without releasing your code
See the LICENSE file for full terms.
Commercial licensing: If you need to use Kinetic in a closed-source product, contact us.
Built with ❤️ · kinetic.dev · Give it a ⭐ if it helped you