Installation Guide

Get Started with
Vyoma UI

Transform your development workflow with our modern component library. Follow these steps to integrate Vyoma UI into your Next.js project.

1

Create Project

Set up a new Next.js project with all the essentials

Begin your journey by creating a fresh Next.js project with TypeScript, Tailwind CSS, and ESLint. Choose your preferred package manager below for the best development experience.

npm

npm

Node Package Manager

npx create-next-app@latest my-vyoma-app --typescript --tailwind --eslint

Recommended Configuration

TypeScript for type safety
Tailwind CSS for styling
ESLint for code quality
App Router for modern routing
2

Install Shadcn UI

Add the foundation component library

Vyoma UI builds upon the excellent Shadcn UI foundation. Install it to unlock a comprehensive collection of beautifully designed, accessible components.

npm

npm

Node Package Manager

npx shadcn@latest init
3

Configure Components

Customize your component setup

The initialization wizard will guide you through configuring your components.json file with the perfect settings for your project.

?Which style would you like to use?New York
?Which color would you like to use as base color?Zinc
?Do you want to use CSS variables for colors?yes

🚀 You're Ready to Build!

Start creating amazing interfaces

Congratulations! Your development environment is now configured with Vyoma UI. You're ready to build beautiful, responsive interfaces with our comprehensive component library.

Browse Components

Explore our extensive library of pre-built components and patterns.

32 Components Available →

View Examples

See real-world implementations and get inspired by our examples.

Live Examples →