shipany-header

Reusable ShipAny header navigation component.

The package renders the full ShipAny header UI while keeping project runtime logic injectable. Auth, routing, locale switching, theme switching, analytics, and image/link components are provided by the consuming project.

Install

pnpm add -E [email protected]

For Tailwind CSS v4, include the compiled package in scanning:

@source '../../node_modules/shipany-header/dist';

Adjust the relative path to match your app CSS file.

Exports

• shipany-header: core types and pure helpers.
• shipany-header/react: small React helpers.
• shipany-header/shipany: complete ShipAny Tailwind header UI.

Usage

'use client';

import { ShipAnyHeader } from 'shipany-header/shipany';

export function Header({ header }) {
  return (
    <ShipAnyHeader
      config={header}
      app={{
        user,
        isAuthChecking,
        requestSignIn: () => openSignInModal(),
        signOut: () => signOut(),
        theme: { current: theme, setTheme },
        locale: { current: locale, options: locales, switchLocale },
      }}
      runtime={{
        LinkComponent: Link,
        ImageComponent: Image,
        pathname,
      }}
    />
  );
}

The package does not import Better Auth, next-intl, next-themes, or project aliases. Keep that wiring in the project adapter.