⭐ If Venumity UI saves you time, please star this repo - it helps more developers discover it and motivates us to keep building. Takes 2 seconds and means a lot !
Live Site - Components - Docs - Templates - ⚡ CLI - Discussions
The fastest way to add Venumity UI components to your Next.js project:
npx venumityui@latest add <component-name>Examples:
# Add a single component
npx venumityui@latest add profile-card-1
# Add a folder-based component (with all files)
npx venumityui@latest add personal-panel-1
# Add multiple components
npx venumityui@latest add profile-card-1 basic-accordion ai-chat-bot-1
# Install all available components
npx venumityui@latest add --all| Command | Description |
|---|---|
npx venumityui@latest add <component> |
Add one or more components |
npx venumityui@latest add --all |
Install all components |
npx venumityui@latest list |
List all components |
npx venumityui@latest search <query> |
Search components |
npx venumityui@latest info <component> |
Component details |
npx venumityui@latest categories |
List categories |
npx venumityui@latest subcategory <category> |
List subcategories |
- ✅ Auto-dependency installation - Detects and installs npm & shadcn/ui dependencies
- ✅ Folder-based components - Supports multi-file components like
personal-panel-1 - ✅ Next.js + TypeScript - Optimized for modern React development
- ✅ Zero configuration - Just run and go
Want to contribute but don't know where to start ? Pick any unchecked component below, comment on its GitHub Issue so nobody duplicates work, then submit a PR !
| Status | Component | Difficulty | Issue |
|---|---|---|---|
| ⬜ | Spotlight Card (mouse-tracking glow on hover) | Easy | #open |
| ⬜ | Aurora Background (animated gradient blobs) | Medium | #open |
| ⬜ | Typewriter / Text Reveal Effect | Easy | #open |
| ⬜ | Glowing Border Card | Easy | #open |
| ⬜ | Infinite Marquee (logo / text scroll row) | Easy | #open |
| ⬜ | Floating Blur Navbar | Medium | #open |
| ⬜ | Animated Counter (count-up on scroll) | Easy | #open |
| ⬜ | Command Palette (Cmd+K popup) | Hard | #open |
| ⬜ | Timeline Component | Easy | #open |
| ⬜ | Step Indicator / Stepper | Medium | #open |
| ⬜ | Floating Dock (macOS-style icon dock) | Medium | #open |
| ⬜ | Hero Section Block (full ready-to-paste section) | Medium | #open |
| ⬜ | Pricing Section Block | Medium | #open |
| ⬜ | Stats Section with Animated Numbers | Easy | #open |
💡 Don't see what you want to build ? Open a Discussion and suggest a new component !
Building modern web apps shouldn't be complicated. Venumity UI gives you beautiful, functional React components with clean minimal code that works right out of the box - no bloated dependencies, no complex configuration. Just copy, paste, and customize.
Perfect for SaaS dashboards, landing pages, portfolios, startups, and developers who want to ship faster without compromising on quality.
- ✅ Zero runtime dependencies
- ✅ TypeScript ready — full type safety
- ✅ Works with Next.js, React, and Vite
- ✅ Clean, readable source code
- ✅ CLI support - Install components with one command
- ✅ Built with Tailwind CSS
- ✅ Fully responsive — mobile first
- ✅ Dark mode support on every component
- ✅ Accessibility-first approach
- ✅ Copy-paste workflow — no install needed
- ✅ Works with any React framework
- ✅ Simple customization
- ✅ Auto-dependency installation - npm & shadcn/ui
# Install components directly
npx venumityui@latest add profile-card-11. Browse → 2. Copy → 3. Paste → 4. Customize
// Example: using the Profile Card component
import ProfileCard1 from '@/components/ui/profile-card-1'
export default function MyPage() {
return (
<ProfileCard1 />
)
}| Tool | Purpose |
|---|---|
| Next.js 15+ | Framework |
| Tailwind CSS v4+ | Styling |
| TypeScript | Type safety |
| Framer Motion / Motion | Animations |
| Lucide React | Icons |
| shadcn/ui | Component primitives |
We welcome contributions from developers of all skill levels. Here is the exact step-by-step :
# Fork the repo on GitHub, then:
git clone https://github.com/YOUR_USERNAME/ui.venumity.git
cd ui.venumity
npm install
npm run dev/components/[category]/[your-component-name].tsx
For example, a spotlight card goes in :
/components/cards/spotlight-card.tsx
Open registry/components.ts and add your component entry following the existing pattern.
Capture a full-screen screenshot at 1280×800px and save it to :
/public/thumbnails/[your-component-name].png
npm run dev
# Check your component renders correctly at localhost:3000git checkout -b feat/spotlight-card
git add .
git commit -m "feat: add spotlight card component"
git push origin feat/spotlight-card
# Then open a Pull Request on GitHubPR title format : feat: add [ComponentName] component
📖 See the full Contributing Guide for detailed code style and quality standards.
| Area | What to do |
|---|---|
| 🐛 Bug fixes | Fix broken components or styling issues |
| ✨ New components | Build from the wishlist table above |
| 📚 Documentation | Improve component descriptions and examples |
| 🎨 Design updates | Improve visual quality of existing components |
| ♿ Accessibility | Add ARIA labels, keyboard nav, reduced motion |
The Resources page is a curated learning hub for developers - framework guides, animation patterns, cheat sheets, and community-shared tips.
Startups - launch 60% faster with polished components ready on day one.
Agencies - deliver consistent quality across every client project.
Developers - clean TypeScript code you can actually read, understand, and own.
Released under the MIT License - free to use commercially, modify, and distribute. The only restriction: don't resell components as-is.
See LICENSE for full details.
Thanks to everyone who has helped build Venumity UI !
Want your avatar here ? Pick a component from the wishlist above and submit a PR !
| Channel | Link |
|---|---|
| ⭐ GitHub Repo | ui.venumity |
| 💬 Discussions | GitHub Discussions |
| 🐛 Bug Reports | GitHub Issues |
| 🌐 Contact Page | ui.venumity.com/contact |
| thevinayakgore@gmail.com |
Built with ❤️ by Vinayak Gore
GitHub ~ Twitter / X ~ Instagram ~ LinkedIn ~ YouTube
Venumity UI ⚡ Ship beautiful interfaces faster.