Skip to main contentSkip to sidebarSkip to headerSkip to footer

Header Container

A layout container for the header section of a page.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
2
3
import { HeaderContainer } from "passport-ui";
import { Button } from "passport-ui";
import { ThemeToggle } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<HeaderContainer
  sticky={true}
  blurred={true}
  variant="full"
>
  <div className="flex justify-between items-center">
    <div className="flex items-center gap-3">
      <h2>My Application</h2>
    </div>
 
    <div className="flex items-center gap-3">
      <nav className="flex items-center gap-2">
        <Button variant="ghost" asChild>
          <Link href="/home">Home</Link>
        </Button>
        <Button variant="ghost" asChild>
          <Link href="/about">About</Link>
        </Button>
        <Button variant="ghost" asChild>
          <Link href="/contact">Contact</Link>
        </Button>
      </nav>
      <ThemeToggle />
    </div>
  </div>
</HeaderContainer>
 
{/* With reveal on scroll */}
<HeaderContainer
  sticky={true}
  blurred={true}
  revealStylesOnScroll={true}
  variant="broad"
>
  <div className="flex justify-between items-center">
    <h2>Reveal Header</h2>
    <Button>Action</Button>
  </div>
</HeaderContainer>

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗