FreeNavigation

Navbars

Use this component for landing pages and documentation sites that need a clean header with a lightweight menu preview.

ReactTailwind CSSNavbarHeader

Build

WorkPricingDocs

Components

Templates

Overview

A simple rounded navbar with compact links, CTA button, and dropdown-style preview.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

No additional packages required after Tailwind CSS setup.

Usage

tsx

<Navbars />

Navbars.tsx

tsx

export function Navbars() {
  return (
    <header className="w-full max-w-4xl">
      <nav className="flex items-center justify-between rounded-full border border-white/10 bg-white px-4 py-2 text-black shadow-xl">
        <span className="text-xs font-black">Build</span>
        <div className="hidden gap-4 text-xs md:flex">
          <a href="#work">Work</a>
          <a href="#pricing">Pricing</a>
          <a href="#docs">Docs</a>
        </div>
        <button className="rounded-full bg-black px-3 py-1 text-xs font-bold text-white">
          Start
        </button>
      </nav>
      <div className="mx-auto mt-3 w-80 rounded-xl border border-white/10 bg-zinc-950 p-3 shadow-2xl shadow-black/20">
        <div className="grid grid-cols-2 gap-3 text-xs text-zinc-400">
          <div className="rounded-lg bg-white/[0.06] p-3">Components</div>
          <div className="rounded-lg bg-white/[0.06] p-3">Templates</div>
        </div>
      </div>
    </header>
  );
}