<Head> Component
Configure the <head> tags, primary color, background color and favicon glyph
of the website.
| Option | Type | Description |
|---|---|---|
| children | ReactNode | Content of <head> |
| color.hue | number | { dark: number; light: number } | The hue of the primary theme color. Default: { dark: 204, light: 212 } (0 - 360) |
| color.saturation | number | { dark: number; light: number } | The saturation of the primary theme color. Default: 100 (0 - 100) |
| color.lightness | number | { dark: number; light: number } | The lightness of the primary theme color (0 - 100) |
| backgroundColor.dark | "rgb(RRR,GGG,BBB)" | "#RRGGBB" | Background color for light theme. Default: "rgb(17,17,17)" |
| backgroundColor.light | "rgb(RRR,GGG,BBB)" | "#RRGGBB" | Background color for dark theme. Default: "rgb(250,250,250)" |
| faviconGlyph | string | The glyph to use as the favicon |
Static Head Tags
If you have static head tags, they should be put as children in Head. For
example:
import { Layout } from 'my-nextra-theme'
import { Head } from 'nextra/components'
export default function MyLayout({ children, ...props }) {
return (
<html lang="en">
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</Head>
<body>
<Layout>{children}</Layout>
</body>
</html>
)
}Dynamic Tags Based on Page
You can dynamically generate the head tags based on the current page’s front matter. For example:
via Markdown front matter
---
title: My title
description: My description
---via exporting metadata object
export const metadata = {
title: 'My title',
description: 'My description'
}in dynamic routes with Catch-all segment 
export async function generateMetadata(props) {
const { mdxPath } = await props.params
const { metadata } = await loadPage(mdxPath)
return {
title: metadata.title || 'Nextra',
description: metadata.description || 'The next site builder'
}
}You can refer to the useConfig API section for more
information about the useConfig hook and the frontMatter object.
Theme Color
You can adjust the theme color of the website by setting primary Hue, Saturation and Lightness (HSL) values for light and dark themes. Try it out for this website:
| Hue (H) | Saturation (S) | Lightness (L) | Background Color |
|---|---|---|---|
You can adjust the lightness independently for dark or light mode to increase
legibility. E.g. to have a neutral primary color you can set the primary color
to be white HSL(0, 0%, 100%) on dark theme and gray HSL(0, 0%, 50%) for
light theme.
<Head
color={{
hue: 0,
saturation: 0,
lightness: {
light: 50,
dark: 100
}
}}
/>Favicon Glyph
This isn’t supported by all browsers, but it’s a nice way to customize the favicon of the website simply by using an emoji or character.
<Head faviconGlyph="✦" />