HeaderHeader Dark

​
Properties

​
sticky
boolean
default:"true"
Whether the header should be sticky or not
The header component serves as a prominent feature on your public website pages. It prominently displays your logo and branding elements alongside intuitive navigation menus. These menus seamlessly direct users to other pages within your site or to specific sections of the current page, ensuring easy exploration and navigation.
page.tsx
import Header from "@/components/header";
Simply replace your own logo at this location: /public/logo.svg

​
Usage

example.tsx
<Header sticky={true} />
Remember that the header is often the first thing users interact with on your site, so make sure the content is welcoming and easy to understand.

​
Tips

When customizing the Header component:
  • Keep navigation link labels concise and clear
  • Ensure the order of navigation links reflects their importance
  • Use action-oriented text for authentication buttons (e.g., “Sign up” instead of “Registration”)
If you need basic components like buttons, inputs, and more, they are available with Shadcn UI.