Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Header
description: A responsive site header with grouped content.
---

## Installation

```bash
npx shadcn@latest add @fulldev/header
```

## Usage

```ts
import { Button } from "@/components/ui/button"
import { Header, HeaderContainer, HeaderGroup } from "@/components/ui/header"
import { Logo, LogoText } from "@/components/ui/logo"
```

## Examples

```astro live props={{ name: 'header' }}
---
import { Button } from "@/components/ui/button"
import { Header, HeaderContainer, HeaderGroup } from "@/components/ui/header"
import { Logo, LogoText } from "@/components/ui/logo"
---

<Header>
  <HeaderContainer>
    <HeaderGroup>
      <Logo href="/">
        <LogoText>Fulldev UI</LogoText>
      </Logo>
    </HeaderGroup>

    <HeaderGroup class="ml-auto justify-end">
      <Button size="sm" variant="ghost">Sign In</Button>
      <Button size="sm">Sign Up</Button>
    </HeaderGroup>
  </HeaderContainer>
</Header>
```

```astro live
---
import { Button } from "@/components/ui/button"
import { Header, HeaderContainer, HeaderGroup } from "@/components/ui/header"
import { Logo, LogoText } from "@/components/ui/logo"
---

<Header variant="floating">
  <HeaderContainer>
    <HeaderGroup>
      <Logo href="/">
        <LogoText>Fulldev UI</LogoText>
      </Logo>
    </HeaderGroup>

    <HeaderGroup class="ml-auto justify-end">
      <Button size="sm" variant="ghost">Sign In</Button>
      <Button size="sm">Sign Up</Button>
    </HeaderGroup>
  </HeaderContainer>
</Header>
```

## Notes

- `Header` controls the layout — `default` is full-width, `floating` is a constrained rounded card.
- `HeaderGroup` is an unopinionated flex row. Use utility classes like `ml-auto` or `justify-end` on the group when you need alignment.
- `HeaderContainer` is an optional middle slot when you need a flex region between left and right groups.
- For a mobile menu, use `Sheet` and `SheetTrigger` from `@/components/ui/sheet` directly inside a `HeaderGroup`.

## API Reference

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/header) for more information on props.