VibeKit - Beautiful animated components for React/Next.js - loading states, e-commerce interactions, chat UIs with MCP server support.
npm install vibekit-uiBeautiful animated components for React/Next.js. Production-ready components for AI interfaces with MCP (Model Context Protocol) server support.


- 7 production-ready animation components
- TypeScript support
- Framer Motion animations
- MCP Server for AI assistants (Claude, etc.)
- Customizable colors and sizes
- Dark/Light mode support
- Responsive design
``bash`
npm install vibekit-ui framer-motion lucide-react
| Component | Category | Description |
|-----------|----------|-------------|
| LoadingDots | Loading | Simple bouncing dots animation |PulseCircle
| | Processing | Circular progress with pulse rings |CodeTyping
| | Creative | Code typing effect with syntax colors |DataProcessing
| | Processing | Data pipeline visualization |AiCreating
| | Creative | Multi-stage AI robot animation |AiCreating2
| | Creative | AI brain with rotating rings |FloatingLogin
| | Auth | Floating login form with OAuth |
`tsx
import { LoadingDots } from 'vibekit-ui';
function MyComponent() {
return
}
`
`tsx
import { LoadingDots } from 'vibekit-ui';
`
Props:
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| size | 'sm' \| 'md' \| 'lg' | 'md' | Size of the dots |color
| | string | '#6366F1' | Color of the dots |
`tsx
import { PulseCircle } from 'vibekit-ui';
const [isActive, setIsActive] = useState(false);
onComplete={() => setIsActive(false)}
/>
`
Props:
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| isActive | boolean | required | Activates the animation |progress
| | number | - | External progress (0-100) |onComplete
| | () => void | - | Callback at 100% |
`tsx
import { AiCreating2 } from 'vibekit-ui';
message="Creating your plan..."
primaryColor="#6366F1"
backgroundColor="#0f172a"
contained={true}
onComplete={() => setIsLoading(false)}
/>
`
Props:
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| isLoading | boolean | required | Controls visibility |message
| | string | 'AI is creating...' | Main message |subMessage
| | string | - | Secondary text |primaryColor
| | string | '#6366F1' | Accent color |backgroundColor
| | string | '#0f172a' | Background color |textColor
| | string | '#ffffff' | Text color |contained
| | boolean | false | Render in container vs overlay |onComplete
| | () => void | - | Completion callback |
`tsx
import { FloatingLogin } from 'vibekit-ui';
primaryColor="#6366F1"
floatIntensity={5}
onLogin={(data) => console.log(data)}
onGoogleLogin={() => signInWithGoogle()}
onAppleLogin={() => signInWithApple()}
/>
`
Props:
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| mode | 'light' \| 'dark' | 'light' | Theme mode |primaryColor
| | string | '#6366F1' | Accent color |floatingEnabled
| | boolean | true | Enable floating animation |floatIntensity
| | number | 5 | Float intensity (1-10) |onLogin
| | (data) => void | - | Login callback |onGoogleLogin
| | () => void | - | Google OAuth callback |onAppleLogin
| | () => void | - | Apple Sign-In callback |
---
This package includes an MCP (Model Context Protocol) server that allows AI assistants like Claude, Cursor, and Windsurf to help users add animation components to their projects.
Run one command to configure MCP for your AI coding tool:
`bashInteractive mode - select your tool
npx vibekit-ui init
Then restart your AI tool to load the MCP server.
$3
| Tool | Config Location |
|------|-----------------|
| Claude Code |
~/.claude/claude_desktop_config.json or ~/.mcp.json |
| Cursor | .cursor/mcp.json or ~/.cursor/mcp.json |
| Windsurf | ~/.codeium/windsurf/mcp_config.json |$3
| Tool | Description |
|------|-------------|
|
list_components | List all available components |
| get_component | Get component details and source code |
| add_component | Get instructions to add a component |
| get_install_command | Get npm install command |$3
Once configured, you can ask:
- "List all animation components"
- "Add the LoadingDots component to my project"
- "Show me the PulseCircle component details"
- "What dependencies do I need for FloatingLogin?"
$3
`bash
npx vibekit-ui --help # Show help
npx vibekit-ui init # Interactive setup
npx vibekit-ui init --client X # Direct setup for client
npx vibekit-ui serve # Start MCP server manually
``---
MIT
johnbekele