Beautiful, animated React components you can copy and paste into your apps.
Built with React, Tailwind CSS, and Framer Motion.
Documentation · GitHub · Components
CappyUI is a modern, open-source UI component library designed for Next.js applications. Each component is carefully crafted with smooth animations, responsive design, and full TypeScript support. Simply copy and paste the components you need into your project.
- Copy & Paste - No npm install needed. Just copy the code and use it.
- Modern Design - Clean, contemporary components that look great out of the box
- Smooth Animations - Powered by Framer Motion for fluid, performant animations
- Fully Customizable - Built with Tailwind CSS for easy theming and styling
- Responsive - Mobile-first design that works beautifully on all devices
- TypeScript Ready - Full TypeScript support with comprehensive type definitions
- Dark Mode - All components support light and dark themes
- Accessible - Built with accessibility best practices
| Technology | Description |
|---|---|
| Next.js 15 | React framework with App Router |
| React 19 | UI library |
| Tailwind CSS 4 | Utility-first CSS framework |
| Framer Motion | Animation library |
| TypeScript | Type safety |
| Fumadocs | Documentation framework |
| Lucide React | Icon library |
CappyUI includes 18+ beautifully designed components:
| Component | Description |
|---|---|
| AI Chat | Interactive AI chat interface |
| Biometric Security | Fingerprint/face authentication UI |
| Book Appointment | Date and time booking component |
| Calendar Current | Single date calendar picker |
| Calendar Range | Date range selection calendar |
| Chat Input Box | Rich chat input with attachments |
| Image Puzzle | Interactive image puzzle game |
| Multi-Factor Auth | 2FA/MFA verification UI |
| Pin Chat | Pinned messages interface |
| Puzzle | Sliding puzzle game component |
| Real-Time Editor | Collaborative text editor |
| Resume Builder | Interactive resume creation UI |
| Secure App | Security verification screen |
| Secure Vault | Password vault interface |
| Spam Notifications | Notification management UI |
| Team Card | Team member display cards |
| Tool Grid | App/tool launcher grid |
| Wave Effect Card | Card with wave hover effect |
Make sure you have a Next.js project with Tailwind CSS set up.
npm install framer-motion lucide-react clsx tailwind-mergenpx shadcn@latest add https://uiregistry.cappychat.com/registry/calendar-current.jsonVisit ui.cappychat.com/docs, browse components, and copy the code directly into your project.
# Clone the repository
git clone https://github.com/VrandaaGarg/cappyui.git
cd cappyui
# Install dependencies
pnpm install
# Run development server
pnpm devOpen http://localhost:3000 to view the documentation site.
cappyui/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── (home)/ # Landing page
│ │ ├── docs/ # Documentation pages
│ │ └── api/ # API routes
│ ├── components/
│ │ ├── AIapplicationsComponents/ # AI-related components
│ │ ├── components/ # Main UI components
│ │ └── ui/ # Base UI primitives
│ └── lib/ # Utilities
├── content/docs/ # MDX documentation files
├── registry/ # Component registry JSON files
└── public/prompts/ # AI prompt templates
Contributions are welcome! If you have ideas for new components or improvements:
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-component) - Commit your changes (
git commit -m 'Add amazing component') - Push to the branch (
git push origin feature/amazing-component) - Open a Pull Request
Vranda Garg
- GitHub: @VrandaaGarg
- Website: ui.cappychat.com
- Portfolio: vrandagarg.in
MIT License - feel free to use these components in your projects, both personal and commercial.
Built with love for the developer community