---
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", "charts", "cms", "icons", "marketing", "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: 62
generated_at: "2026-09-21T01:50:16.753Z"
---

# @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 (62)

| name | type | description | install |
| --- | --- | --- | --- |
| 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` |
| 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` |
| approval-panel | registry:component | An approval routing panel illustration. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/approval-panel.json` |
| blog-section-one | registry:block | A semantic blog archive grouped by year, with aligned dates, useful metadata, and accessible row links. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/blog-section-one.json` |
| contact-section-four | registry:block | A focused project-inquiry form with contact details and a large editorial heading. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/contact-section-four.json` |
| contact-section-one | registry:block | A contact directory that routes visitors to sales, support, community, documentation, and developer resources. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/contact-section-one.json` |
| contact-section-three | registry:block | A compact project contact form paired with a concise service introduction. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/contact-section-three.json` |
| contact-section-two | registry:block | A split contact section with a consultation summary and detailed project inquiry form. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/contact-section-two.json` |
| content-section-five | registry:block | A sticky editorial narrative with a normal mobile flow and a sequence of image-led content panels. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/content-section-five.json` |
| content-section-four | registry:block | A connected-publishing story with an animated revision metric, trend visualization, and output checklist. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/content-section-four.json` |
| content-section-one | registry:block | A restrained principles section with a clear introduction and a responsive set of supporting ideas. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/content-section-one.json` |
| content-section-three | registry:block | A structured feature grid with one dominant narrative and two focused supporting ideas. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/content-section-three.json` |
| content-section-two | registry:block | An editorial product story with balanced copy, configurable local media, and optional caption metadata. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/content-section-two.json` |
| contribution-graph | registry:ui | Clean contribution calendar with built-in normalization, keyboard navigation, and responsive latest-day visibility. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/contribution-graph.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` |
| designed-for-focus-illustration | registry:component | An interactive focus illustration with concentric motion and reduced-motion support. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/designed-for-focus-illustration.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` |
| faq-section-one | registry:block | A two-column FAQ layout with accessible accordion answers and a support prompt. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/faq-section-one.json` |
| faq-section-three | registry:block | An editorial FAQ section with a large introduction and accessible accordion rows. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/faq-section-three.json` |
| faqs-section-two | registry:block | A centered FAQ section with accessible accordions and a follow-up contact link. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/faqs-section-two.json` |
| fast-by-default-illustration | registry:component | An interactive field of animated speed lines with reduced-motion support. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/fast-by-default-illustration.json` |
| flexible-at-scale-illustration | registry:component | An interactive spring-based line field that responds to pointer movement. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/flexible-at-scale-illustration.json` |
| footer-section-one | registry:block | A multi-column product footer with social links and an email newsletter form. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/footer-section-one.json` |
| footer-section-two | registry:block | A compact navigation footer with product links, social actions, and legal copy. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/footer-section-two.json` |
| forgot-password-one | registry:block | A compact password-recovery card with email input, submit action, and return link. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/forgot-password-one.json` |
| forgot-password-three | registry:block | A left-aligned password-recovery form with concise guidance and navigation back. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/forgot-password-three.json` |
| forgot-password-two | registry:block | A centered password-recovery form with a prominent heading and return action. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/forgot-password-two.json` |
| header-four | registry:block | A responsive header with animated multi-level desktop and mobile navigation menus. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/header-four.json` |
| header-one | registry:block | A responsive marketing header with animated mobile navigation and account actions. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/header-one.json` |
| header-three | registry:block | A payment-product header with grouped navigation menus and a responsive mobile drawer. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/header-three.json` |
| header-two | registry:block | A responsive marketing header with a bordered shell and animated mobile menu. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/header-two.json` |
| hero-section-four | registry:block | A complete expense-workflow hero with responsive header, lead form, logo cloud, and supporting illustrations. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/hero-section-four.json` |
| hero-section-one | registry:block | A dark product hero with badges, dual actions, and the matching responsive header. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/hero-section-one.json` |
| hero-section-three | registry:block | An art-directed hero with shader-backed visuals and a focused primary action. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/hero-section-three.json` |
| hero-section-two | registry:block | A motion-led hero with animated copy, grouped reveals, and its matching header. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/hero-section-two.json` |
| keyboard-shortcut | registry:ui | Interactive keyboard shortcut display with pressed-key feedback, callback handling, optional sound, and shadcn Kbd styling. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/keyboard-shortcut.json` |
| logo-cloud-five | registry:block | A headline-led animated logo cloud with responsive brand cards. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/logo-cloud-five.json` |
| logo-cloud-four | registry:block | A large animated company grid with a prominent trust statement. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/logo-cloud-four.json` |
| logo-cloud-one | registry:block | A compact monochrome logo strip for customer or partner proof. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/logo-cloud-one.json` |
| logo-cloud-three | registry:block | A horizontally framed customer logo strip with restrained typography. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/logo-cloud-three.json` |
| logo-cloud-two | registry:block | A compact partner logo strip using a mixed icon and wordmark collection. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/logo-cloud-two.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` |
| matching-panel | registry:component | A policy matching panel illustration. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/matching-panel.json` |
| package-manager-command | registry:ui | Accessible package-manager selector and copy command bar for npm, pnpm, yarn, and Bun. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/package-manager-command.json` |
| payment-card | registry:component | A motion-ready payment card illustration. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/payment-card.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` |
| proximity-nav | registry:ui | Route-aware sidebar navigation with pointer-responsive guide lines, controlled active state, and a navigation-free preview mode. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/proximity-nav.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` |
| receipt-panel | registry:component | A receipt capture panel illustration. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/receipt-panel.json` |
| release-workflow-illustration | registry:component | An interactive release tracker with configurable workflow data and autoplay. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/release-workflow-illustration.json` |
| report-panel | registry:component | A report fetching panel illustration. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/report-panel.json` |
| revision-cycles-illustration | registry:component | An interactive comparison of eliminated and remaining revision rounds. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/revision-cycles-illustration.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` |
| sign-up-one | registry:block | A detailed account creation form with identity, password, consent, and sign-in actions. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/sign-up-one.json` |
| sign-up-two | registry:block | A split-screen account creation flow with social sign-in, product benefits, and an animated visual. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/sign-up-two.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` |
| teams-section-five | registry:block | A dark editorial team grid with role badges and portrait-led member cards. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/teams-section-five.json` |
| teams-section-four | registry:block | A global-team recruiting section with portrait cards and role badges. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/teams-section-four.json` |
| teams-section-one | registry:block | A grouped leadership and team directory with social links and empty-state handling. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/teams-section-one.json` |
| teams-section-three | registry:block | A centered team directory with portrait cards, roles, and profile links. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/teams-section-three.json` |
| teams-section-two | registry:block | A simple responsive team grid with names, roles, and portrait imagery. | `npx shadcn@latest add https://ui.navdeepsingh.dev/r/teams-section-two.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` |

## 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).
```