Welcome to
VUI Design System
VUI (Vyoma UI) is a comprehensive React component library built with modern web standards. This introduction will help you understand the design philosophy and get you started building with VUI.
What is VUI?
More than just a component library – it's a complete design system
VUI (Vyoma UI) is built upon the excellent foundation of shadcn/ui, taking it to the next level with enhanced design patterns, improved usability, and streamlined developer experience. While shadcn/ui provides the building blocks, VUI adds the spatial wisdom and design philosophy that makes creating beautiful interfaces effortless.
Built on shadcn/ui Foundation
VUI extends shadcn/ui with carefully crafted design improvements, enhanced component variants, and a cohesive design system that reduces decision fatigue and speeds up development.
Whether you're building a simple landing page or a complex web application, VUI provides the enhanced foundation you need to create polished user experiences with less hassle and more confidence.
Design Principles
These core principles guide every decision in VUI, from component design to API structure.
Spatial Wisdom
Every component respects space, creating natural breathing room and visual hierarchy.
Purpose-Driven
Each component serves a specific purpose with clear, predictable behavior.
Visual Consistency
Unified design language that scales across your entire application.
Developer Experience
Built with TypeScript, well-documented, and designed for productivity.
Why VUI over shadcn/ui?
While shadcn/ui is excellent, VUI takes it further with enhanced design and reduced complexity
shadcn/ui
Excellent foundation, but...
- ×Requires extensive customization for cohesive design
- ×Decision fatigue on spacing and variants
- ×Limited advanced component compositions
- ×Basic examples and documentation
VUI (Vyoma UI)
Enhanced and production-ready
- Pre-configured design system with spatial wisdom
- Opinionated choices reduce decision fatigue
- Advanced layouts and component compositions
- Comprehensive examples and best practices
What You Get
Everything you need to build modern React applications
Component Categories
Ready to Get Started?
The fastest way to start using VUI is through the installation guide. Follow the step-by-step process to set up the design system in your React application.
Install
Add VUI to your project with npm or yarn
Configure
Set up themes and customize your design tokens
Build
Start creating beautiful interfaces with VUI components
What's Next?
Explore these sections to learn more about VUI and how to use it effectively.