Premium Next.js Navbar Component with Tailwind CSS and shadcn/ui

💻 Stylish Navbar Component for Next.js

Elevate your projects with a professionally crafted Navbar Component built using:

- Next.js 14 for dynamic routing.

- Tailwind CSS for modern, responsive design.

- shadcn/ui for seamless UI interactions.

This component is lightweight, customizable, and perfect for developers looking to save time while delivering stunning results.

---

📦 Installation Steps

1. Download & Extract the Component

After purchasing, you’ll receive a ZIP file:

- Download it.

- Extract the contents into your Next.js project folder.

2. Set Up Environment Variables

This component uses Clerk for authentication. Ensure you have:

- `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`

- `CLERK_SECRET_KEY`

How to Get Clerk Keys?

1. Sign up at Clerk.dev.

2. Create a new Clerk Application.

3. Go to API Keys in the dashboard.

4. Copy:

- Publishable Key → NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY

- Secret Key → CLERK_SECRET_KEY

5. Add them to your .env file:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key_here CLERK_SECRET_KEY=your_secret_key_here

3. Install Dependencies

npm i

4. Run Your Next.js App

Start the development server:

npm run dev

Your stylish Navbar is now ready! 🎉

---

🔧 Customization

- Modify colors, spacing, and styles in the className props.

- Adjust links in the navigation config file.

Enjoy your sleek, production-ready Navbar! 🚀