Shadcn/UI is a component library built on Tailwind CSS and Radix UI primitives. Unlike traditional libraries, you copy components directly into your project, giving you full control over styling and behavior.

How do I install Shadcn/UI components?

Use the shadcn CLI to add components: npx shadcn@latest add [component-name]. This copies the component files directly into your project.

Can I customize Shadcn/UI components?

Yes, since components are copied into your project, you have complete control. Modify styling, add props, or change behavior as needed.

Is Shadcn/UI free to use?

Yes, Shadcn/UI is completely free and open-source. Components are MIT licensed and you can use them in any project, including commercial ones.

Navigation Menu Component - shadcn/ui Examples

About the shadcn/ui Navigation Menu Component

The Navigation Menu component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add navigation-menu` and copy it directly into your project.

Navigation Menu Component — Frequently Asked Questions

How do I create a mega menu with shadcn NavigationMenu?

Use `<NavigationMenuContent>` with a grid layout inside: `<div className="grid gap-3 p-6 md:w-[400px] md:grid-cols-2">`. Add links and descriptions in each grid cell.

How do I make shadcn NavigationMenu mobile-responsive?

Hide the NavigationMenu on mobile and replace with a Sheet or Drawer containing the same links. Use `hidden md:flex` on the nav and `md:hidden` on the mobile menu trigger.

How do I highlight the active navigation item?

Check the current pathname: `<NavigationMenuLink className={cn(navigationMenuTriggerStyle(), pathname === '/about' && 'text-primary')}>`. Use `usePathname()` from Next.js.