@navui

shadcn-compatible components, blocks, and illustrations that adapt to your existing design configuration.

55 components pro available react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗ pro ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://ui.navdeepsingh.dev/r/registry.json

pnpm pnpm dlx shadcn@latest add https://ui.navdeepsingh.dev/r/registry.json

bun bunx shadcn@latest add https://ui.navdeepsingh.dev/r/registry.json

fetch registry curl -s https://ui.navdeepsingh.dev/r/registry.json

Components

55 total

Brand Logo component

Shared brand mark used across auth and marketing blocks.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/brand-logo.json

Forgot Password One block

Forgot Password One — Forgot Password block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/forgot-password-one.json

Forgot Password Three block

Forgot Password Three — Forgot Password block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/forgot-password-three.json

Forgot Password Two block

Forgot Password Two — Forgot Password block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/forgot-password-two.json

npx shadcn@latest add https://ui.navdeepsingh.dev/r/sign-up-one.json

npx shadcn@latest add https://ui.navdeepsingh.dev/r/sign-up-two.json

Footer Section One block

Footer Section One — Footer block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/footer-section-one.json

Footer Section Two block

Footer Section Two — Footer block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/footer-section-two.json

Header One block

Header One — Header block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/header-one.json

Header Two block

Header Two — Header block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/header-two.json

Header Three block

Header Three — Header block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/header-three.json

Header Four block

Header Four — Responsive header with animated navigation menus.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/header-four.json

Hero Section Four block

Hero Section Four — Hero Section block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/hero-section-four.json

Hero Section One block

Hero Section One — Hero Section block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/hero-section-one.json

Hero Section Three block

Hero Section Three — Hero Section block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/hero-section-three.json

Hero Section Two block

Hero Section Two — Hero Section block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/hero-section-two.json

Logo Cloud One block

Logo Cloud One — Logo Cloud block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/logo-cloud-one.json

Logo Cloud Three block

Logo Cloud Three — Logo Cloud block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/logo-cloud-three.json

Logo Cloud Two block

Logo Cloud Two — Logo Cloud block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/logo-cloud-two.json

Logo Cloud Four block

Logo Cloud Four — Logo Cloud block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/logo-cloud-four.json

Logo Cloud Five block

Logo Cloud Five — Logo Cloud block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/logo-cloud-five.json

Teams Section Five block

Teams Section Five — Teams block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/teams-section-five.json

Teams Section Four block

Teams Section Four — Teams block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/teams-section-four.json

Teams Section One block

Teams Section One — Teams block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/teams-section-one.json

Teams Section Three block

Teams Section Three — Teams block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/teams-section-three.json

Teams Section Two block

Teams Section Two — Teams block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/teams-section-two.json

Testamonial Section One block

Testamonial Section One — Testamonials block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/testamonial-section-one.json

FAQ Section One block

FAQ Section One — FAQs block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/faq-section-one.json

FAQs Section Two block

FAQs Section Two — FAQs block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/faqs-section-two.json

FAQ Section Three block

FAQ Section Three — FAQs block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/faq-section-three.json

Contact Section One block

Contact Section One — Contact block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/contact-section-one.json

Contact Section Two block

Contact Section Two — Contact block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/contact-section-two.json

Contact Section Three block

Contact Section Three — Contact block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/contact-section-three.json

Contact Section Four block

Contact Section Four — Contact block.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/contact-section-four.json

Feature Section One block

Interactive product features list with hover-activated row spotlight and motion transitions.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/feature-section-one.json

Project Gallery One block

A horizontally scrollable project gallery with an accessible image viewer and keyboard navigation.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/project-gallery-one.json

Stats Section One block

A business results section that combines measurable outcomes with a customer proof point.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/stats-section-one.json

Pricing Section One block

A responsive three-tier pricing section with a monthly and yearly billing switcher.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/pricing-section-one.json

Process Section One block

A service delivery section with typed process steps and a reusable project pipeline illustration.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/process-section-one.json

CTA Section One block

A polished call to action with primary and secondary links for clear next steps.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/cta-section-one.json

Payment Card Illustration component

A motion-ready payment card illustration.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/payment-card.json

Workflow Desk Illustration component

A combined expense workflow illustration with a payment card and four process panels.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/workflow-desk.json

Receipt Panel Illustration component

A receipt capture panel illustration.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/receipt-panel.json

Matching Panel Illustration component

A policy matching panel illustration.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/matching-panel.json

Report Panel Illustration component

A report fetching panel illustration.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/report-panel.json

Approval Panel Illustration component

An approval routing panel illustration.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/approval-panel.json

Delivery Pipeline Illustration component

A responsive three-stage project delivery illustration for service and product workflows.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/delivery-pipeline.json

Animated Group ui

Motion-powered staggered animation container.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/animated-group.json

Text Effect ui

Motion-based per-character / per-word text animation.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/text-effect.json

Segment Spotlight ui

Composable spotlight primitives with controlled state, animated segments, arbitrary controls, and hover or click activation.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/segment-spotlight.json

Magnetic Button ui

A shadcn-compatible button that subtly follows the cursor using spring-based motion.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/magnetic-button.json

Animated Tabs ui

A tab component with a moving active pill and directional content transitions.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/animated-tabs.json

Expandable Card ui

Composable card-dialog primitives with accessible modal behavior, controlled state, shared media motion, and custom actions.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/expandable-card.json

Rail Nav ui

Motion rail navigation with the original line-to-link reveal, controlled expansion, flexible links, and optional scroll tracking.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/rail-nav.json

Animated Numbers ui

Accessible in-view number counter with locale-aware formatting and reduced-motion support.

npx shadcn@latest add https://ui.navdeepsingh.dev/r/animated-numbers.json