Documentation
Everything you need to know about NavCN and how to use it in your projects.
Introduction
NavCN is a navigation component registry built for modern React and shadcn projects. It provides a curated collection of production-ready navbar components that you can browse, preview, and install directly into your project.
Unlike traditional component libraries, NavCN components are installed as source code — not as a package dependency. When you install a component, the full source is added to your project and you own it completely.
NavCN is built on top of the shadcn registry ecosystem. Components are installed using the shadcn CLI.
Installation
NavCN uses the shadcn CLI to install components. Make sure you have a project with shadcn/ui configured.
Prerequisites
- Next.js or React project
- Tailwind CSS configured
- shadcn/ui initialized (
npx shadcn@latest init)
Initialize shadcn (if not already)
Adding Navbars
Install any NavCN component using the shadcn CLI with the component's registry URL:
Minimal Navbar
Flip Hover Navbar
Full Page Navbar
What happens after installation?
- The component source code is added to your project at
components/navbars/[component-name].tsx - Required npm dependencies are installed automatically
- You can import and use the component immediately
Using the component
import MinimalNavbar from "@/components/navbars/minimal-navbar";
export default function Layout() {
return (
<MinimalNavbar />
);
}
Customization
Because the component source lives in your project, you can customize it however you like:
- Change colors — modify Tailwind classes or CSS variables in the component
- Modify layout — add or remove navigation items, change spacing, rearrange elements
- Adjust animations — tweak duration, easing, and spring values using the
motionprops - Add your own content — replace placeholder links and brand names with your own
Dependencies
NavCN components use the following libraries. These are installed automatically by the CLI:
| Package | Purpose | Note |
|---|---|---|
| motion | Animations | Import from motion/react |
| lucide-react | Icons | Used in most components |
| next-themes | Dark mode | Some components use ThemeToggle |
Important: All NavCN components import animations from motion/react (the motion package), not framer-motion. Do not mix the two.
Navbar List
All currently available navigation components:
Minimal Navbar
A clean, responsive navigation bar with smooth search expansion, shopping bag, and user icons. Perfect for portfolios and SaaS apps.
Flip Hover Navbar
An animated mega-menu navigation with flip-text hover effects and rich dropdown panels. Ideal for SaaS products and marketing sites.
Full Page Navbar
A dramatic full-screen overlay navigation with image previews and smooth reveal animations. Perfect for creative agencies and portfolios.
Centered Logo Navbar
A symmetrical navbar with the logo centered and navigation links split evenly on both sides. Elegant for fashion, luxury, and editorial brands.
Registry Architecture
NavCN follows the shadcn registry spec. Each component has a JSON registry file hosted at:
These JSON files describe the component's files, dependencies, and registry dependencies. The shadcn CLI reads these files to install components correctly.
The @navcn namespace in the shadcn registry is a planned future goal. Currently, components are installed using the full URL. Once officially submitted to the shadcn registry, installation will work via shorthand: