Head

Declarative component for setting <head> tags. Accepts standard HTML head elements (<title>, <meta>, <link>) as children and manages them in the document head. When a HeadProvider is present, it coordinates with the provider; otherwise it applies changes directly to document.head on the client.

Import

import { Head } from 'catmint/head'

Signature

function Head({ children }: HeadProps): ReactNode

Props

Prop	Type	Required	Description
`children`	`ReactNode`	No	Standard HTML head elements: `<title>`, `<meta>`, `<link>`

`HeadProps`

interface HeadProps {
  children?: ReactNode
}

Return Value

Returns null — the Head component does not render any visible output.

Examples

import { Head } from 'catmint/head'

function MyPage() {
  return (
    <>
      <Head>
        <title>My Page</title>
        <meta name="description" content="A description of my page" />
        <link rel="canonical" href="https://example.com/my-page" />
      </Head>
      <main>
        <h1>My Page</h1>
      </main>
    </>
  )
}

// Multiple Head components merge their configs
function Layout({ children }) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      {children}
    </>
  )
}

function Page() {
  return (
    <Layout>
      <Head>
        <title>Dashboard</title>
      </Head>
      <Dashboard />
    </Layout>
  )
}