Vyoma UI

Beautiful, accessible React components with smooth animations

🚀 Get Started • 📖 Components • 🤝 Contributing

✨ Why Vyoma UI?

Vyoma UI (VUI) is a modern React component library built on top of shadcn/ui, taking it to the next level with enhanced design patterns, improved usability, and a streamlined developer experience. While shadcn/ui provides excellent building blocks, VUI adds the spatial wisdom and design philosophy that makes creating beautiful interfaces effortless.

• 🎯 Copy & Paste - No complex setup, just beautiful components
• ⚡ Lightweight - Only what you need, when you need it
• 🎨 Customizable - Built with Tailwind CSS for easy theming
• 📱 Responsive - Works perfectly on all devices
• ♿ Accessible - ARIA compliant with keyboard navigation
• 🌙 Dark Mode - Beautiful in light and dark themes
• 🚀 Enhanced shadcn/ui - Improved design system with consistent spacing
• 🧠 Spatial Wisdom - Thoughtful design that respects space and visual hierarchy

🚀 Quick Start

Getting started with Vyoma UI is simple. You can either clone the repository to explore all components or install it directly in your project.

Running the Demo Locally

# Clone and run locally
git clone https://github.com/Srijan-Baniyal/vui.git
cd vui && pnpm install && pnpm dev

Visit http://localhost:3000 to see all components in action.

Installing in Your Project

# Using pnpm
pnpm add vui

// Copy any component and use it
import { ShimmerButton } from "vui/buttons/ShimmerButton";

export default function App() {
  return <ShimmerButton>✨ Click me!</ShimmerButton>;
}

🎨 Components

Vyoma UI offers a rich collection of components across multiple categories, with over 30+ beautifully crafted components including advanced animations, backgrounds, and interactive elements.

🔘 Buttons & Interactive Elements

FlipButton • MagneticButton • ShimmerButton • SpotLight • VideoButton • ShinyButtons

✏️ Text Animations

AnimatedNumber • CountUp • TextDecryption • TypingText • WavingText • FlipText

🧩 UI Elements

BentoGrid • Card • Navigation • Sheet • Tooltip • WheelPicker • Accordion • Pill

🌊 Backgrounds

Tunnel • WavyTiles • Hexagonal • DrawingLines

🎛️ Inputs & Forms

CheckboxUpgraded • MagicalChatInput • MagicalCaret

🤖 AI Components

MagicalChatInput • MagicalCaret

View all components →

🛠️ Built With

Next.js • TypeScript • Tailwind CSS • Framer Motion • Radix UI • GSAP

🤝 Contributing

We'd love your help making Vyoma UI even better!

• 🐛 Report bugs or suggest features
• 🎨 Add new components following our guidelines
• 📝 Improve documentation or fix typos
• ⭐ Star the repo to show your support

Development Setup

1. Clone the repository:

   git clone https://github.com/Srijan-Baniyal/vyoma-ui.git

2. Install dependencies:

   cd vyoma-ui && yarn install

3. Start the development server:

   yarn dev

Read our Contributing Guide →

📈 Stats

• 30+ Beautiful Components
• 100% TypeScript Ready
• Fully Accessible
• Dark Mode Support
• Responsive Design

📄 License

MIT License - feel free to use in personal and commercial projects.

---

_{Built with ❤️ by Srijan Baniyal
⭐ Star this on GitHub if you like this project!}