> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shipkit.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Header

<img src="https://mintcdn.com/shipkit/HuQd_kWdB4hOr_Br/images/header.png?fit=max&auto=format&n=HuQd_kWdB4hOr_Br&q=85&s=78bc17bd1236a1550fc74900ceb6d214" alt="Header" width="2400" height="490" data-path="images/header.png" />

## Usage

<Tabs>
  <Tab title="Astro">
    ```tsx theme={null}
    ---
    import { Header } from '~/components';
    ---

    <Header user={Astro.locals.user} />
    ```
  </Tab>

  <Tab title="Next.js">
    ```tsx theme={null}
    import { Header } from '~/components';
    import { getCurrentUser } from '~/core/auth/server';

    export default async function Page() {
      const user = await getCurrentUser();

      return <Header user={user} />;
    }
    ```
  </Tab>
</Tabs>

## Props

<ResponseField name="user" type="User | null" required>
  The current user. (<a href="#user">User</a>)
</ResponseField>

<ResponseField name="isMinimal" type="boolean">
  Minimal version of the header that only includes the logo. Useful for auth pages such as sign in and sign up.
</ResponseField>

## Content

To update the content of the header, edit `site.name` and `site.header.links` in `src/config/site.ts`.

```typescript theme={null}
import { env } from '~/core/env';

export const site = {
  name: 'ShipKit',
  header: {
    links: [
      {
        title: 'Overview',
        href: '/',
        target: '_self',
      },
      {
        title: 'Pricing',
        href: '/pricing',
        target: '_self',
      },
      {
        title: 'FAQs',
        href: '/faqs',
        target: '_self',
      },
    ],
  },
};
```

## Types

### User

```typescript theme={null}
import type { User } from '~/core/auth';
```