---
name: "@navui"
slug: "navui"
description: "shadcn-compatible components, blocks, and illustrations that adapt to your existing design configuration."
category: "Animated components"
tags: ["animation", "auth", "blocks", "buttons", "cards", "icons", "marketing", "media", "navigation", "payments", "pro-available"]
framework: "react"
license: "MIT"
author: "navdeepannu"
website: "https://ui.navdeepsingh.dev"
github: "https://github.com/navdeepannu/portfolio"
registry: "https://ui.navdeepsingh.dev/r/registry.json"
pro: true
pro_url: "https://ui.navdeepsingh.dev/blocks/pricing"
github_stars: 3
component_count: 55
generated_at: "2026-07-28T08:59:05.895Z"
---

# @navui

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

## Links

- Website: https://ui.navdeepsingh.dev
- GitHub: https://github.com/navdeepannu/portfolio
- Registry JSON: https://ui.navdeepsingh.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/navui
- This file: https://sh4dcn.vercel.app/md/navui.md
- Pro / pricing: https://ui.navdeepsingh.dev/blocks/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.navdeepsingh.dev/r/registry.json
pnpm dlx shadcn@latest add https://ui.navdeepsingh.dev/r/registry.json
bunx shadcn@latest add https://ui.navdeepsingh.dev/r/registry.json
# clone the source repo
git clone https://github.com/navdeepannu/portfolio.git
# fetch the raw registry index
curl -s https://ui.navdeepsingh.dev/r/registry.json
```

## Components (55)

| name | type | description | install |
| --- | --- | --- | --- |
| brand-logo | registry: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 | registry:block | Forgot Password One — Forgot Password block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/forgot-password-one.json` |
| forgot-password-three | registry:block | Forgot Password Three — Forgot Password block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/forgot-password-three.json` |
| forgot-password-two | registry:block | Forgot Password Two — Forgot Password block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/forgot-password-two.json` |
| sign-up-one | registry:block | Sign Up One — Sign Up block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/sign-up-one.json` |
| sign-up-two | registry:block | Sign Up Two — Sign Up block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/sign-up-two.json` |
| footer-section-one | registry:block | Footer Section One — Footer block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/footer-section-one.json` |
| footer-section-two | registry:block | Footer Section Two — Footer block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/footer-section-two.json` |
| header-one | registry:block | Header One — Header block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/header-one.json` |
| header-two | registry:block | Header Two — Header block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/header-two.json` |
| header-three | registry:block | Header Three — Header block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/header-three.json` |
| header-four | registry:block | Header Four — Responsive header with animated navigation menus. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/header-four.json` |
| hero-section-four | registry:block | Hero Section Four — Hero Section block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/hero-section-four.json` |
| hero-section-one | registry:block | Hero Section One — Hero Section block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/hero-section-one.json` |
| hero-section-three | registry:block | Hero Section Three — Hero Section block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/hero-section-three.json` |
| hero-section-two | registry:block | Hero Section Two — Hero Section block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/hero-section-two.json` |
| logo-cloud-one | registry:block | Logo Cloud One — Logo Cloud block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/logo-cloud-one.json` |
| logo-cloud-three | registry:block | Logo Cloud Three — Logo Cloud block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/logo-cloud-three.json` |
| logo-cloud-two | registry:block | Logo Cloud Two — Logo Cloud block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/logo-cloud-two.json` |
| logo-cloud-four | registry:block | Logo Cloud Four — Logo Cloud block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/logo-cloud-four.json` |
| logo-cloud-five | registry:block | Logo Cloud Five — Logo Cloud block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/logo-cloud-five.json` |
| teams-section-five | registry:block | Teams Section Five — Teams block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/teams-section-five.json` |
| teams-section-four | registry:block | Teams Section Four — Teams block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/teams-section-four.json` |
| teams-section-one | registry:block | Teams Section One — Teams block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/teams-section-one.json` |
| teams-section-three | registry:block | Teams Section Three — Teams block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/teams-section-three.json` |
| teams-section-two | registry:block | Teams Section Two — Teams block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/teams-section-two.json` |
| testamonial-section-one | registry:block | Testamonial Section One — Testamonials block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/testamonial-section-one.json` |
| faq-section-one | registry:block | FAQ Section One — FAQs block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/faq-section-one.json` |
| faqs-section-two | registry:block | FAQs Section Two — FAQs block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/faqs-section-two.json` |
| faq-section-three | registry:block | FAQ Section Three — FAQs block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/faq-section-three.json` |
| contact-section-one | registry:block | Contact Section One — Contact block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/contact-section-one.json` |
| contact-section-two | registry:block | Contact Section Two — Contact block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/contact-section-two.json` |
| contact-section-three | registry:block | Contact Section Three — Contact block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/contact-section-three.json` |
| contact-section-four | registry:block | Contact Section Four — Contact block. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/contact-section-four.json` |
| feature-section-one | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry:component | A motion-ready payment card illustration. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/payment-card.json` |
| workflow-desk | registry: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 | registry:component | A receipt capture panel illustration. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/receipt-panel.json` |
| matching-panel | registry:component | A policy matching panel illustration. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/matching-panel.json` |
| report-panel | registry:component | A report fetching panel illustration. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/report-panel.json` |
| approval-panel | registry:component | An approval routing panel illustration. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/approval-panel.json` |
| delivery-pipeline | registry: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 | registry:ui | Motion-powered staggered animation container. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/animated-group.json` |
| text-effect | registry:ui | Motion-based per-character / per-word text animation. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/text-effect.json` |
| segment-spotlight | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |

## For AI agents

```text
You are adding components from @navui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/navui.md) for the component list.
2. Fetch the machine-readable index: https://ui.navdeepsingh.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: navui).
```