Header

Preview

Features

• 🎨 Responsive design with mobile menu support
• 🔐 Built-in authentication integration
• 🌐 Language switching capability
• 🎭 Dark/light theme toggle
• 💳 Credits display for authenticated users
• 📱 Mobile-friendly hamburger menu

Usage

Import and use the Header component in your page:

import Header from '@/components/header';
 
export default function Page({ children }) {
  return (
    <>
      <Header />
      {children}
    </>
  );
}

Customization App Name

You can change the app name by setting the NEXT_PUBLIC_APP_NAME environment variable.

NEXT_PUBLIC_APP_NAME="Your App Name"

Customization Logo

You can change the logo by replacing the public/logo.svg file.

Customization Links

You can change the links by setting the header.links in the messages/en.json file.

{
  "header": {
    "links": [
      { title: 'Features', href: '/features' },
      { title: 'Pricing', href: '/pricing' },
      { title: 'Docs', href: '/docs' }
    ]
  }
}