Search for a command to run...
More than just ready-made navbars — a toolkit for crafting sleek, animated navigation with ease.
Clean, readable components you can copy directly into your project
Built with Framer Motion for fluid, professional interactions
Tailwind CSS makes styling changes simple and intuitive
Responsive design that works perfectly on all screen sizes
NavKit provides pre-built navigation components that you can copy into your project and customize as needed.
Choose from various navbar styles and designs
Copy the component code directly to your clipboard
Modify colors, spacing, and behavior to match your design
Install the required dependencies to start using NavKit components in your project.
npm install framer-motion lucide-react next-themesSet up dark mode support with automatic system preference detection.
components/theme-toggle.tsx
"use client"
import * as React from "react"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
export function ThemeToggle() {
const { theme, setTheme } = useTheme()
return (
<Button
variant="ghost"
size="icon"
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
className="relative"
>
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
)
}app/layout.tsx
import { ThemeProvider } from "next-themes";
export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html>
)
}NavKit provides everything you need to create professional navigation experiences.