Skip to content
fulldev/ui
X GitHub

Header

fulldev/ui 
---
import { Button } from "@/components/ui/button"
import { Header, HeaderActions, HeaderContent } from "@/components/ui/header"
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
---


<Header>
  <HeaderContent>
    <Logo href="/">
      <LogoText>fulldev/ui</LogoText>
    </Logo>
    <HeaderActions class="ml-auto">
      <Button size="sm" variant="ghost">Sign In</Button>
      <Button size="sm">Sign Up</Button>
    </HeaderActions>
  </HeaderContent>
</Header>

Installation

Section titled “Installation”

To install the header component, run the following command:

Terminal window
pnpm dlx shadcn@latest add @fulldev-ui/header

Usage

Section titled “Usage”
import { Button } from "@/components/ui/button"
import { Header, HeaderActions, HeaderContent } from "@/components/ui/header"
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"```


```astro
<Header>
  <HeaderContent>
    <Logo href="/">
      <LogoText>fulldev/ui</LogoText>
    </Logo>
    <HeaderActions class="ml-auto">
      <Button size="sm" variant="ghost">Sign In</Button>
      <Button size="sm">Sign Up</Button>
    </HeaderActions>
  </HeaderContent>
</Header>

Examples

Section titled “Examples”

Outline

Section titled “Outline”
fulldev/ui 
---
import { Button } from "@/components/ui/button"
import { Header, HeaderActions, HeaderContent } from "@/components/ui/header"
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
---


<Header variant="ghost">
  <HeaderContent>
    <Logo href="/">
      <LogoText>fulldev/ui</LogoText>
    </Logo>
    <HeaderActions class="ml-auto">
      <Button size="sm" variant="ghost">Sign In</Button>
      <Button size="sm">Sign Up</Button>
    </HeaderActions>
  </HeaderContent>
</Header>

Muted

Section titled “Muted”
fulldev/ui 
---
import { Button } from "@/components/ui/button"
import { Header, HeaderActions, HeaderContent } from "@/components/ui/header"
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
---


<Header variant="muted">
  <HeaderContent>
    <Logo href="/">
      <LogoText>fulldev/ui</LogoText>
    </Logo>
    <HeaderActions class="ml-auto">
      <Button size="sm" variant="ghost">Sign In</Button>
      <Button size="sm">Sign Up</Button>
    </HeaderActions>
  </HeaderContent>
</Header>

Float

Section titled “Float”
fulldev/ui 
---
import { Button } from "@/components/ui/button"
import { Header, HeaderActions, HeaderContent } from "@/components/ui/header"
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
---


<Header frame="float">
  <HeaderContent>
    <Logo href="/">
      <LogoText>fulldev/ui</LogoText>
    </Logo>
    <HeaderActions class="ml-auto">
      <Button size="sm" variant="ghost">Sign In</Button>
      <Button size="sm">Sign Up</Button>
    </HeaderActions>
  </HeaderContent>
</Header>

Float muted

Section titled “Float muted”
fulldev/ui 
---
import { Button } from "@/components/ui/button"
import { Header, HeaderActions, HeaderContent } from "@/components/ui/header"
import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
---


<Header frame="float" variant="muted">
  <HeaderContent>
    <Logo href="/">
      <LogoText>fulldev/ui</LogoText>
    </Logo>
    <HeaderActions class="ml-auto">
      <Button size="sm" variant="ghost">Sign In</Button>
      <Button size="sm">Sign Up</Button>
    </HeaderActions>
  </HeaderContent>
</Header>