@gridui/site-header

Landing family. Public API: SiteHeader, SiteHeaderProps.

Import components from @gridui/site-header and load @gridui/site-header/styles.css after Theme. Load styles for any composed dependency used by this family. Applications own routes, labels, state persistence, and branding.

See component ownership and release history.

Frame layout

SiteHeader accepts the full public FrameHeaderProps contract, including native header props and refs. padding accepts GridUI spacing values or { base, md?, lg? }; the breakpoints are 40rem and 64rem, with missing values inheriting the previous breakpoint. gap accepts a GridUI spacing value, wrap controls wrapping, and justify selects "start" or "between".

<SiteHeader
    padding={{ base: 24, lg: 32 }}
    wrap
    gap={16}
    justify="between"
>
    <strong>Product</strong>
    <nav aria-label="Main navigation">...</nav>
</SiteHeader>

Omitting the options preserves the composition defaults: no wrapping, a spacing gap of 24, start alignment, and FrameHeader padding of 16 below 40rem and 24 at larger widths. Layout options style the content surface; native style and className continue to apply to the outer header element.