Introduction

Nurav UI — A curated collection of stunning, accessible React & Next.js components that transform ordinary websites into exceptional ones.

• Open source. Copy-paste. Fully yours.
• This isn't yet another rigid component package you install and fight with. It's a foundation for building your own perfect component library — one that looks breathtaking out of the box and bends exactly to your vision.
• Traditional libraries force you into their box: install from NPM, import, pray the styles don't clash, then spend days overriding or forking when you need something unique. Nurav UI flips that entirely.
• You get clean, production-ready component code to drop directly into your project. Modify, extend, or reinvent any piece without restrictions. The result? A cohesive, high-end look and feel that turns heads — without the usual headaches.

Q. Why Nurav UI Feels 10x Better ?

We obsess over details most libraries overlook: micro-interactions, harmonious typography pairings, subtle depth effects, perfect hover/focus states, seamless dark mode, and responsive elegance that just works. Components are crafted to feel luxurious yet minimal — giving your site that premium polish instantly.

• Core Principles
• True Ownership
• You own the code. No black-box dependencies or forced updates. Edit a button's gradient, add custom animations, or rebuild logic entirely — it's all right there in your repo.
• Seamless Composition
• Every component follows a consistent, predictable pattern built on modern primitives (accessibility-first foundations + Tailwind CSS). Add new ones or combine existing ones without relearning APIs. Your team (and AI tools) stay productive.
• Effortless Distribution
• A simple CLI lets you add, update, or share components across projects. Flat-file structure means easy version control, team syncing, and even AI-generated extensions based on your patterns.
• Premium Defaults

We hand-pick styles that feel current in 2026: soft shadows, glass-like effects, fluid transitions, semantic color scales, and typography that breathes. Your UI looks expensive from day one — clean, modern, consistent — yet trivial to tweak for branding.

• AI-First Workflow
• Open, readable code makes it simple for LLMs to understand your system and generate matching new components. Check out our AI Setup guide to learn how to save tokens and eliminate hallucinations when building with AI agents.
• Beautiful Components That Wow
• Start with a rich set of essentials, all designed to harmonize perfectly and look elite:

Some Components:

1. Buttons — Variants like primary/filled, outline, ghost, subtle, gradient, icon-only, loading states, with neumorphic and glassmorphic options. Hover lifts, ripple effects, and size scales feel alive.
2. Cards — Elevated, bordered, hover-interactive, media-embedded, testimonial-style, pricing tiers — with subtle depth and micro-animations that draw attention.
3. Forms — Input fields, textareas, selects, checkboxes, radios, switches, file uploads, date pickers — all with floating labels, validation states, and elegant error/success feedback.
4. Navigation — Responsive navbars, sidebars, mega menus, breadcrumbs, tabs, pagination, command palettes — smooth transitions and mobile-perfect drawers.
5. Modals & Dialogs — Clean overlays, confirmation prompts, sheet drawers, alerts, tooltips, popovers — with backdrop blur and focus trapping.
6. Data Display — Tables (sortable, paginated), data grids, badges, avatars, progress bars, accordions, collapsible sections — readable and scannable.
7. Feedback — Toasts, notifications, loaders/spinners, skeletons, tooltips — subtle and non-intrusive.
8. Advanced — Carousels, sliders, dropdowns with search, rich text editors, calendars, charts wrappers, dark mode toggles — all polished for impact.

• Every component ships with variants, sizes, states, and responsive behaviors tuned for beauty. Mix them freely — they feel like they belong together.
• Ready to make your Next.js or React site look and feel 10x more professional?
• Install the CLI, add your first components, and watch the magic happen.
• Start building something beautiful today.

Installing Components

npx shadcn@latest add https://nurav-ui.vercel.app/r/[component-name].json

npx shadcn@latest add @nurav-ui/[component-name]