Component · Unhead
[Unhead Home](https://unhead.unjs.io/ "Home")
- [Docs](https://unhead.unjs.io/docs/react/head/guides/get-started/overview)
- [Tools](https://unhead.unjs.io/tools)
- [Learn](https://unhead.unjs.io/learn/guides/what-is-capo)
[Releases](https://unhead.unjs.io/releases)
Search…```k`` /`
[Unhead on GitHub](https://github.com/unjs/unhead)
[User Guides](https://unhead.unjs.io/docs/react/head/guides/get-started/overview)
[API](https://unhead.unjs.io/docs/react/head/api/get-started/overview)
[Releases](https://unhead.unjs.io/docs/react/releases/v3)
React
- [Switch to React](https://unhead.unjs.io/docs/react/head/guides/get-started/installation)
- [Switch to TypeScript](https://unhead.unjs.io/docs/typescript/head/guides/get-started/installation)
- [Switch to Vue](https://unhead.unjs.io/docs/vue/head/guides/get-started/installation)
- [Switch to Svelte](https://unhead.unjs.io/docs/svelte/head/guides/get-started/installation)
- [Switch to Solid.js](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/installation)
- [Switch to Angular](https://unhead.unjs.io/docs/angular/head/guides/get-started/installation)
- [Switch to Nuxt](https://unhead.unjs.io/docs/nuxt/head/guides/get-started/installation)
v3 (stable)
Head
- [Discord Support](https://discord.com/invite/275MBUBvgP)
- [React Playground](https://stackblitz.com/edit/github-5hqsxyid)
- Get Started
- [Overview](https://unhead.unjs.io/docs/react/head/guides/get-started/overview)
- [Introduction to Unhead](https://unhead.unjs.io/docs/react/head/guides/get-started/intro-to-unhead)
- [Starter Recipes](https://unhead.unjs.io/docs/react/head/guides/get-started/starter-recipes)
- [Installation](https://unhead.unjs.io/docs/react/head/guides/get-started/installation)
- [Upgrade Guide](https://unhead.unjs.io/docs/react/head/guides/get-started/migration)
- [Migrate React Helmet](https://unhead.unjs.io/docs/react/head/guides/get-started/migrate-from-react-helmet)
- Core Concepts
- [Titles & Title Templates](https://unhead.unjs.io/docs/react/head/guides/core-concepts/titles)
- [Tag Sorting & Placement](https://unhead.unjs.io/docs/react/head/guides/core-concepts/positions)
- [Class & Style Attributes](https://unhead.unjs.io/docs/react/head/guides/core-concepts/class-attr)
- [Inline Style & Scripts](https://unhead.unjs.io/docs/react/head/guides/core-concepts/inner-content)
- [Tag Deduplication](https://unhead.unjs.io/docs/react/head/guides/core-concepts/handling-duplicates)
- [DOM Event Handling](https://unhead.unjs.io/docs/react/head/guides/core-concepts/dom-event-handling)
- [Script Loading](https://unhead.unjs.io/docs/react/head/guides/core-concepts/loading-scripts)
- [ Component](https://unhead.unjs.io/docs/react/head/guides/core-concepts/components)
- [Reactivity](https://unhead.unjs.io/docs/react/head/guides/core-concepts/reactivity)
- [StreamingNew](https://unhead.unjs.io/docs/react/head/guides/core-concepts/streaming)
- Build Plugins
- [Overview](https://unhead.unjs.io/docs/react/head/guides/build-plugins/overview)
- [Tree-Shaking](https://unhead.unjs.io/docs/react/head/guides/build-plugins/tree-shaking)
- [useSeoMeta Transform](https://unhead.unjs.io/docs/react/head/guides/build-plugins/seo-meta-transform)
- [Minify Transform](https://unhead.unjs.io/docs/react/head/guides/build-plugins/minify-transform)
- [Devtools](https://unhead.unjs.io/docs/react/head/guides/build-plugins/devtools)
- Plugins
- [Template Params](https://unhead.unjs.io/docs/react/head/guides/plugins/template-params)
- [Alias Sorting](https://unhead.unjs.io/docs/react/head/guides/plugins/alias-sorting)
- [Canonical Plugin](https://unhead.unjs.io/docs/react/head/guides/plugins/canonical)
- [Infer SEO Meta](https://unhead.unjs.io/docs/react/head/guides/plugins/infer-seo-meta-tags)
- [Minify](https://unhead.unjs.io/docs/react/head/guides/plugins/minify)
- [Validate](https://unhead.unjs.io/docs/react/head/guides/plugins/validate)
Core Concepts
# Component
[Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/0.react/head/guides/1.core-concepts/1.components.md)
Last updated Jan 19, 2026 by [Harlan Wilton](https://github.com/harlan-zw) in [docs: sync](https://github.com/unjs/unhead/commit/d2f86454774aa60706628b46a850653e1e4d56d9).
On this page
- [How Do I Get Started with Head Components?](#how-do-i-get-started-with-head-components)
- [What Tags Are Supported?](#what-tags-are-supported)
- [How Do I Use Advanced Features?](#how-do-i-use-advanced-features)
**Quick Answer:** Use ``, ``, `<Meta>`, `<Link>`, and `<Script>` components for JSX-based head management. Import from `@unhead/react/components`.
The `<Head>` component from `@unhead/react` makes HTML head tag management simple in React applications.
While `useHead()` provides better TypeScript support, the `<Head>` component offers an HTML-like syntax that's more readable.
## [How Do I Get Started with Head Components?](#how-do-i-get-started-with-head-components)
```
import { Head } from '@unhead/react'
function App() {
return (
<Head>
<title>My Site
)
}
```
## [What Tags Are Supported?](#what-tags-are-supported)
### [Which Meta Tags Should I Use?](#which-meta-tags-should-i-use)
```
Page Title
```
### [How Do I Add Link Tags?](#how-do-i-add-link-tags)
```
{/* Stylesheets */}
{/* Preloading Critical Resources */}
{/* Performance Hints */}
{/* Icons */}
```
### [How Do I Add Scripts?](#how-do-i-add-scripts)
```
{/* Async Loading */}
{/* Module/NoModule Pattern */}
{/* Inline Scripts */}
```
### [How Do I Set Up Open Graph Tags?](#how-do-i-set-up-open-graph-tags)
```
```
### [How Do I Configure Twitter Cards?](#how-do-i-configure-twitter-cards)
```
```
## [How Do I Use Advanced Features?](#how-do-i-use-advanced-features)
### [How Do I Control Tag Priority?](#how-do-i-control-tag-priority)
Control rendering order with `tagPriority`:
```
Must Load First
```
### [How Do I Position Tags in the Document?](#how-do-i-position-tags-in-the-document)
Place tags in specific locations:
```
```
### [How Does Tag Deduplication Work?](#how-does-tag-deduplication-work)
Unhead automatically dedupes tags based on their content and attributes. Later instances override earlier ones:
```
<>
```
[Edit this page](https://github.com/unjs/unhead/edit/main/docs/0.react/head/guides/1.core-concepts/1.components.md)
[Markdown For LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/0.react/head/guides/1.core-concepts/1.components.md)
Did this page help you?
[Migrate React Helmet Replace React Helmet with Unhead - 60% smaller bundle (4.5kb gzipped), automatic Capo.js tag sorting, TypeScript support, and modern head management.](https://unhead.unjs.io/docs/react/head/guides/get-started/migrate-from-react-helmet) [Reactivity Use useState and useEffect with useHead() for reactive head tags. Integrates with React Query, SWR, and async data fetching.](https://unhead.unjs.io/docs/react/head/guides/core-concepts/reactivity)
On this page
- [How Do I Get Started with Head Components?](#how-do-i-get-started-with-head-components)
- [What Tags Are Supported?](#what-tags-are-supported)
- [How Do I Use Advanced Features?](#how-do-i-use-advanced-features)
[GitHub](https://github.com/unjs/unhead) [ Discord](https://discord.com/invite/275MBUBvgP)
[ /llms.txt](https://unhead.unjs.io/llms.txt)
[Part of the UnJS ecosystem](https://unjs.io/)
### Head Management
- [Getting Started](https://unhead.unjs.io/docs/react/head/guides/get-started/overview)
- [useHead](https://unhead.unjs.io/docs/react/head/api/composables/use-head)
- [useSeoMeta](https://unhead.unjs.io/docs/react/head/api/composables/use-seo-meta)
- [useHeadSafe](https://unhead.unjs.io/docs/react/head/api/composables/use-head-safe)
- [useScript](https://unhead.unjs.io/docs/react/head/api/composables/use-script)
### Schema.org
- [Getting Started](https://unhead.unjs.io/docs/react/schema-org/guides/get-started/overview)
- [useSchemaOrg](https://unhead.unjs.io/docs/react/schema-org/api/composables/use-schema-org)
- [Nodes](https://unhead.unjs.io/docs/react/schema-org/guides/core-concepts/nodes)
- [Recipes](https://unhead.unjs.io/docs/react/schema-org/guides/recipes/identity)
### Guides
- [Titles](https://unhead.unjs.io/docs/react/head/guides/core-concepts/titles)
- [Streaming SSR](https://unhead.unjs.io/docs/react/head/guides/core-concepts/streaming)
- [DOM Events](https://unhead.unjs.io/docs/react/head/guides/core-concepts/dom-event-handling)
- [Plugins](https://unhead.unjs.io/docs/react/head/guides/plugins/template-params)
### Tools
- [Meta Tag Generator](https://unhead.unjs.io/tools/meta-tag-generator)
- [OG Image Generator](https://unhead.unjs.io/tools/og-image-generator)
- [Schema.org Generator](https://unhead.unjs.io/tools/schema-generator)
- [Capo.js Analyzer](https://unhead.unjs.io/tools/capo-analyzer)
### Articles
- [What is Capo.js?](https://unhead.unjs.io/learn/guides/what-is-capo)
### Research
- [State of in 2026](https://unhead.unjs.io/learn/research/state-of-head-2026)
- [Streaming Head Performance](https://unhead.unjs.io/learn/research/streaming-head-performance)
- [Capo.js Performance Research](https://unhead.unjs.io/learn/research/capo-performance-research)
Copyright © 2025-2026 Harlan Wilton - [MIT License](https://github.com/unjs/unhead/blob/main/license)