A modern head manager for React, inspired by react-helmet with additional features and async support.
npm install react-helmet-pro</code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><meta></code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><link></code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><script></code>, structured data, favicons, analytics, and security headers designed for real world production use.
<br />
<br />> Robust head management for SEO, analytics, and SSR made simple.
<br />
<br />---
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Features</h2>
<br />
<br />- Dynamic <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><title></code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><meta></code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><link></code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><script></code> injection
<br />- JSON-LD Structured Data support
<br />- Google Analytics integration
<br />- Favicons & SEO helpers
<br />- Security meta tags (CSP, nosniff, etc.)
<br />- SSR-friendly with <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">collectHelmetTags()</code>
<br />- Middleware support for reusable helmet logic
<br />- Context API for global helmet state
<br />- TypeScript support out of the box
<br />
<br />---
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Installation</h2>
<br />
<br />``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash
<br /><h1 class="text-2xl font-bold mt-6 mb-4">or with npm</h1>
<br />npm install react-helmet-pro
<br /><h1 class="text-2xl font-bold mt-6 mb-4">with pnpm</h1>
<br />pnpm add react-helmet-pro
<br /><h1 class="text-2xl font-bold mt-6 mb-4">or with yarn</h1>
<br />yarn add react-helmet-pro
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />---
<br />
<br /><h1 class="text-2xl font-bold mt-6 mb-4">Basic Usage</h1>
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx
<br />import { HelmetProvider } from 'react-helmet-pro';
<br />
<br />function App() {
<br /> return (
<br /> <HelmetProvider>
<br /> <MainRouter />
<br /> </HelmetProvider>
<br /> );
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx
<br />import { Helmet } from 'react-helmet-pro';
<br />
<br /><Helmet
<br /> title="About Us"
<br /> meta={[
<br /> { name: 'description', content: 'Learn about our company' },
<br /> { name: 'keywords', content: 'company, team, about' },
<br /> ]}
<br />/>
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx
<br />import { StructuredData } from 'react-helmet-pro';
<br />
<br /><StructuredData
<br /> json={{
<br /> '@context': 'https://schema.org',
<br /> '@type': 'Organization',
<br /> name: 'React Helmet Pro Inc.',
<br /> url: 'https://reacthelmetpro.dev',
<br /> }}
<br />/>
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx
<br />import { Analytics } from 'react-helmet-pro';
<br />
<br /><Analytics type="gtag" id="G-XXXXXXXXXX" />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />---
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Middleware Example</h2>
<br />
<br />You can define reusable middleware functions to extend or modify head data.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ts
<br />// middleware/withSiteSuffix.ts
<br />export const withSiteSuffix = (head) => {
<br /> if (head.title) {
<br /> return { ...head, title: </code>${head.title} | My Awesome Site<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> };
<br /> }
<br /> return head;
<br />};
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />Apply it in your component:
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx
<br />import { useHelmetMiddleware } from 'react-helmet-pro';
<br />import { withSiteSuffix } from './middleware/withSiteSuffix';
<br />
<br />useHelmetMiddleware(withSiteSuffix);
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />---
<br />
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Next.js Usage</h2>
<br />
<br /></code>react-helmet-pro<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> works seamlessly with <strong>Next.js</strong>, including full support for <strong>Server Side Rendering (SSR)</strong> and <strong>App Router</strong>. Follow these steps to integrate it:
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />Wrap your app in the </code>HelmetProvider<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx
<br />// app/layout.tsx (App Router)
<br />import './globals.css';
<br />import { HelmetProvider } from 'react-helmet-pro';
<br />
<br />export default function RootLayout({ children }: { children: React.ReactNode }) {
<br /> return (
<br /> <html lang="en">
<br /> <body>
<br /> <HelmetProvider>{children}</HelmetProvider>
<br /> </body>
<br /> </html>
<br /> );
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />> 💡 Note: </code>HelmetProvider<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> must be used inside the </code><body><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag, not the </code><head><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in App Router.
<br />
<br />---
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx
<br />// app/about/page.tsx or any client component
<br />'use client';
<br />
<br />import { Helmet } from 'react-helmet-pro';
<br />
<br />export default function AboutPage() {
<br /> return (
<br /> <>
<br /> <Helmet
<br /> title="About Us"
<br /> meta={[
<br /> { name: 'description', content: 'Learn about our company' },
<br /> { name: 'keywords', content: 'company, team, about' },
<br /> ]}
<br /> />
<br /> <h1>About Us</h1>
<br /> </>
<br /> );
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />---
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />If you are using <strong>custom SSR setup</strong> with </code>getServerSideProps<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or want finer control, you can extract head tags server-side:
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx
<br />// In custom _document.tsx for SSR
<br />import Document, { Html, Head, Main, NextScript } from 'next/document';
<br />import { collectHelmetTags } from 'react-helmet-pro';
<br />
<br />class MyDocument extends Document {
<br /> static async getInitialProps(ctx) {
<br /> const initialProps = await Document.getInitialProps(ctx);
<br /> const helmetTags = collectHelmetTags(/<em> your Helmet elements </em>/);
<br />
<br /> return {
<br /> ...initialProps,
<br /> helmetTags,
<br /> };
<br /> }
<br />
<br /> render() {
<br /> // Inject head tags here if extracted manually
<br /> return (
<br /> <Html>
<br /> <Head>
<br /> {/<em> SSR extracted tags can go here if needed </em>/}
<br /> </Head>
<br /> <body>
<br /> <Main />
<br /> <NextScript />
<br /> </body>
<br /> </Html>
<br /> );
<br /> }
<br />}
<br />
<br />export default MyDocument;
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />---
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx
<br />// client/components/HeadWrapper.tsx
<br />'use client';
<br />
<br />import { useHelmetMiddleware } from 'react-helmet-pro';
<br />import { withSiteSuffix } from '../middleware/withSiteSuffix';
<br />
<br />export default function HeadWrapper() {
<br /> useHelmetMiddleware(withSiteSuffix);
<br /> return null;
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />Use </code>HelmetWrapper<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> at the top of your page/component to apply middleware.
<br />
<br />---
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />- <strong>Hydration Mismatch Warning</strong>: Avoid using dynamic data like </code>Date.now()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>Math.random()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in head tags without guards (</code>typeof window !== 'undefined'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) or snapshotting.
<br />- Always mark </code>Helmet<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>StructuredData<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> usage in </code>use client<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> components.
<br />
<br />---
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Components API</h2>
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />| Prop | Type | Description |
<br />|--------|-----------------------------|--------------------------|
<br />| title | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Sets the page title |
<br />| meta | </code>Array<{ name: string; content: string }><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Injects meta tags |
<br />
<br />---
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />| Prop | Type | Description |
<br />|------|----------|--------------------------|
<br />| json | </code>object<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | JSON-LD structured data |
<br />
<br />---
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />| Prop | Type | Description |
<br />|------|----------|---------------------|
<br />| href | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Path to favicon.ico |
<br />
<br />---
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />| Prop | Type | Description |
<br />|------|--------------|---------------------------|
<br />| type | </code>'gtag'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Currently only supports GTag |
<br />| id | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Your Google Analytics ID |
<br />
<br />---
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />Injects security-related meta tags like CSP, XSS protection, nosniff headers, etc.
<br />
<br />---
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">SSR Support</h2>
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx
<br />import { collectHelmetTags } from 'react-helmet-pro';
<br />
<br />const headTags = collectHelmetTags(/<em> JSX head elements </em>/);
<br />// Use this to inject into SSR-rendered HTML
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />---
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Testing</h2>
<br />
<br />Test with Jest + React Testing Library.
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash
<br />npm run test
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />Example test:
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx
<br />render(<Helmet title="Test Page" />);
<br />expect(document.title).toBe("Test Page");
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />---
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Contributing</h2>
<br />
<br />We welcome all contributions!
<br />To get started:
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash
<br />git clone https://github.com/lahiruudayakumara/react-helmet-pro.git
<br />cd react-helmet-pro
<br />pnpm install
<br />pnpm run dev
<br /></code>``
<br />
<br />Please open an issue or pull request if you find bugs or have feature requests.
<br />
<br />---
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Contact</h2>
<br />
<br />- Email: <a href="mailto:udayakumara.wdl@gmail.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">lahiruudayakumara.info@gmail.com</a>
<br />- Website: <a href="https://lahiruudayakumara.com" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">https://lahiruudayakumara.me</a>
<br />
<br />---
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">License</h2>
<br />
<br />MIT License. See <a href="LICENSE" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">LICENSE</a> for details.
<br />
<br />---
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Credits</h2>
<br />
<br />Inspired by <a href="https://github.com/nfl/react-helmet" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">React Helmet</a>, but rebuilt for modern apps with middleware, SSR, and context extensibility.
<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"2a:[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}]\n2b:[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":10}]\n"])</script><script>self.__next_f.push([1,"2c:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@testing-library/jest-dom\",{\"href\":\"/package/%40testing-library%2Fjest-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@testing-library/jest-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.6.3\"}]]}],[\"$\",\"$L5\",\"@testing-library/react\",{\"href\":\"/package/%40testing-library%2Freact\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@testing-library/react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.3.0\"}]]}],[\"$\",\"$L5\",\"@types/node\",{\"href\":\"/package/%40types%2Fnode\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/node\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^22.14.1\"}]]}],[\"$\",\"$L5\",\"@types/react\",{\"href\":\"/package/%40types%2Freact\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^19.1.1\"}]]}],[\"$\",\"$L5\",\"@vitejs/plugin-react\",{\"href\":\"/package/%40vitejs%2Fplugin-react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L2e\",\"$undefined\"]}],\"@vitejs/plugin-react\"]}],\"$L2f\"]}],\"$L30\",\"$L31\",\"$L32\",\"$L33\",\"$L34\"]}]}]\n"])</script><script>self.__next_f.push([1,"2e:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2f:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.3.4\"}]\n30:[\"$\",\"$L5\",\"jsdom\",{\"href\":\"/package/jsdom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"jsdom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^26.0.0\"}]]}]\n31:[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^19.0.0\"}]]}]\n32:[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^19.0.0\"}]]}]\n33:[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.4.0\"}]]}]\n34:[\"$\",\"$L5\",\"vitest\",{\"href\":\"/package/vitest\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hove"])</script><script>self.__next_f.push([1,"r:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"vitest\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.1.1\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>