Installation
Install the package from npm, then import the component in your application code.
Terminal
Import
02
Anatomy
Structural breakdown of the component. The parts stay stable; only trailing content changes by variant.
Variant
Marketing page content
Parts
Header shell
Full-width bar. Solid surface + shadow by default; bg-transparent + no shadow when the transparent flag is set.
Brand slot
Spring wordmark (or custom logo node / link) pinned on the left.
Navigation row
Marketing variant only — nav links with optional menu chevron cues.
CTA slot
Marketing variant only — defaults to SpringButton (primary, sm, 'Apply Now').
Responsive behavior
Nav cluster hides on smaller widths; logo remains visible and anchored.
03
Variants
Two content presets — app for in-product flows, marketing for acquisition pages — plus an orthogonal transparent flag that drops the surface background and shadow.
variant="app"
Logo-only bar for focused application flows.
Application content
Copied!
variant="marketing"
Logo + primary nav + Apply Now CTA (SpringButton · primary · sm).
Marketing page content
Copied!
variant="marketing" · transparent
Marketing chrome with no background or shadow — pairs with hero sections that should bleed under the header.
Hero section bleeds under the transparent header
Copied!
variant="app" · transparent
Logo-only chrome over a brand wash — used by the AppFlow shell so the page wash bleeds through.
AppFlow page wash bleeds under the transparent header
Copied!
04
Develop
API surface and implementation hooks for product teams.
| Prop | Type | Notes |
|---|---|---|
| variant | 'app' | 'marketing' | Content preset (default 'app'). |
| transparent | boolean | Drops bg-surface + shadow so a hero / page wash bleeds through. Combine with either variant. |
| logo | ReactNode | Custom brand node override. |
| logoHref | string | Wraps the default Spring wordmark in an anchor when logo is omitted. |
| navItems | SpringHeaderNavItem[] | Marketing only. Pass [] to hide nav links. |
| cta | ReactNode | Marketing only. Replaces default Apply Now button. |
| ctaLabel / onCtaClick | string / handler | Quick default CTA overrides. |
| children | ReactNode | Manual trailing-region override (highest priority). |
| className | string | Merged on root <header>. |