qwikifiers · andrei9669 · Nov 30, 2025 · Nov 30, 2025 · Nov 30, 2025 · Nov 30, 2025
diff --git a/.changeset/few-maps-smash.md b/.changeset/few-maps-smash.md
@@ -0,0 +1,8 @@
+---
+'@qwik-ui/headless': minor
+'@qwik-ui/styled': minor
+'@qwik-ui/themes': minor
+'@qwik-ui/utils': minor
+---
+
+FEAT: Migrate packages to qwik-v2
diff --git a/apps/component-tests/src/components/router-head/router-head.tsx b/apps/component-tests/src/components/router-head/router-head.tsx
@@ -1,5 +1,5 @@
-import { component$ } from '@builder.io/qwik';
-import { useDocumentHead, useLocation } from '@builder.io/qwik-city';
+import { component$ } from '@qwik.dev/core';
+import { useDocumentHead, useLocation } from '@qwik.dev/router';
 
 /**
  * The RouterHead component is placed inside of the document `<head>` element.

diff --git a/apps/component-tests/src/components/showcase-test/showcase-test.tsx b/apps/component-tests/src/components/showcase-test/showcase-test.tsx
@@ -1,5 +1,5 @@
-import { Component, component$, useSignal, useTask$ } from '@builder.io/qwik';
-import { useLocation } from '@builder.io/qwik-city';
+import { Component, component$, useSignal, useTask$ } from '@qwik.dev/core';
+import { useLocation } from '@qwik.dev/router';
 import { metaGlobComponents } from './component-imports';
 
 export const ShowcaseTest = component$(() => {

diff --git a/apps/component-tests/src/entry.dev.tsx b/apps/component-tests/src/entry.dev.tsx
@@ -9,7 +9,7 @@
  * - More code is transferred to the browser than in SSR mode.
  * - Optimizer/Serialization/Deserialization code is not exercised!
  */
-import { render, RenderOptions } from '@builder.io/qwik';
+import { render, RenderOptions } from '@qwik.dev/core';
 import Root from './root';
 
 export default function (opts: RenderOptions) {

diff --git a/apps/component-tests/src/entry.preview.tsx b/apps/component-tests/src/entry.preview.tsx
@@ -10,12 +10,12 @@
  * - https://vitejs.dev/config/preview-options.html#preview-options
  *
  */
-import { createQwikCity } from '@builder.io/qwik-city/middleware/node';
+import { createQwikRouter } from '@qwik.dev/router/middleware/node';
 // The `render` import must stay after `qwikCityPlan` import: https://github.com/BuilderIO/qwik/issues/3634
-import qwikCityPlan from '@qwik-city-plan';
+import qwikRouterConfig from '@qwik-router-config';
 import render from './entry.ssr';
 
 /**
  * The default export is the QwikCity adaptor used by Vite preview.
  */
-export default createQwikCity({ render, qwikCityPlan });
+export default createQwikRouter({ render, qwikRouterConfig });
diff --git a/apps/component-tests/src/entry.ssr.tsx b/apps/component-tests/src/entry.ssr.tsx
@@ -10,7 +10,7 @@
  * - npm run build
  *
  */
-import { renderToStream, RenderToStreamOptions } from '@builder.io/qwik/server';
+import { renderToStream, RenderToStreamOptions } from '@qwik.dev/core/server';
 import { manifest } from '@qwik-client-manifest';
 import Root from './root';
 

diff --git a/apps/component-tests/src/root.tsx b/apps/component-tests/src/root.tsx
@@ -1,5 +1,5 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
-import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city';
+import { component$, useStyles$ } from '@qwik.dev/core';
+import { QwikRouterProvider, RouterOutlet } from '@qwik.dev/router';
 
 import { RouterHead } from './components/router-head/router-head';
 import globalStyles from './global.css?inline';
@@ -25,7 +25,7 @@ export default component$(() => {
   useStyles$(globalStyles);
 
   return (
-    <QwikCityProvider>
+    <QwikRouterProvider>
       <head>
         <meta charset="utf-8" />
         <link rel="manifest" href="/manifest.json" />
@@ -47,6 +47,6 @@ export default component$(() => {
           <RouterOutlet />
         </ThemeProvider>
       </body>
-    </QwikCityProvider>
+    </QwikRouterProvider>
   );
 });
diff --git a/apps/component-tests/src/routes/[kit]/[component]/[example]/index.tsx b/apps/component-tests/src/routes/[kit]/[component]/[example]/index.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 import { ShowcaseTest } from '../../../../components/showcase-test/showcase-test';
 
 export default component$(() => {

diff --git a/apps/component-tests/src/routes/index.tsx b/apps/component-tests/src/routes/index.tsx
@@ -1,5 +1,5 @@
-import { component$ } from '@builder.io/qwik';
-import type { DocumentHead } from '@builder.io/qwik-city';
+import { component$ } from '@qwik.dev/core';
+import type { DocumentHead } from '@qwik.dev/router';
 
 export default component$(() => {
   return <div>kit/component/example</div>;

diff --git a/apps/component-tests/src/routes/service-worker.ts b/apps/component-tests/src/routes/service-worker.ts
@@ -7,7 +7,7 @@
  * Qwik uses a service worker to speed up your site and reduce latency, ie, not used in the traditional way of offline.
  * You can also use this file to add more functionality that runs in the service worker.
  */
-import { setupServiceWorker } from '@builder.io/qwik-city/service-worker';
+import { setupServiceWorker } from '@qwik.dev/router/service-worker';
 
 setupServiceWorker();
 

diff --git a/apps/component-tests/src/routes/test-route/index.tsx b/apps/component-tests/src/routes/test-route/index.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 
 export default component$(() => {
   return <div>Test Route</div>;

diff --git a/apps/component-tests/tsconfig.json b/apps/component-tests/tsconfig.json
@@ -6,7 +6,7 @@
     "module": "ES2022",
     "lib": ["es2022", "DOM", "WebWorker", "DOM.Iterable"],
     "jsx": "react-jsx",
-    "jsxImportSource": "@builder.io/qwik",
+    "jsxImportSource": "@qwik.dev/core",
     "strict": true,
     "resolveJsonModule": true,
     "moduleResolution": "bundler",

diff --git a/apps/component-tests/vite.config.ts b/apps/component-tests/vite.config.ts
@@ -1,13 +1,13 @@
-import { qwikVite } from '@builder.io/qwik/optimizer';
-import { qwikCity } from '@builder.io/qwik-city/vite';
+import { qwikVite } from '@qwik.dev/core/optimizer';
+import { qwikRouter } from '@qwik.dev/router/vite';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
   root: 'apps/component-tests',
   cacheDir: '../../node_modules/.vite/apps/component-tests',
   plugins: [
-    qwikCity(),
+    qwikRouter(),
     qwikVite({
       client: {
         outDir: '../../dist/apps/component-tests/client',

diff --git a/apps/website/adapters/static/vite.config.ts b/apps/website/adapters/static/vite.config.ts
@@ -1,13 +1,13 @@
-import { staticAdapter } from '@builder.io/qwik-city/adapters/static/vite';
-import { extendConfig } from '@builder.io/qwik-city/vite';
+import { staticAdapter } from '@qwik.dev/router/adapters/static/vite';
+import { extendConfig } from '@qwik.dev/router/vite';
 import baseConfig from '../../vite.config';
 
 export default extendConfig(baseConfig, () => {
   return {
     build: {
       ssr: true,
       rollupOptions: {
-        input: ['@qwik-city-plan'],
+        input: ['@qwik-router-config'],
       },
     },
     plugins: [

diff --git a/apps/website/package.json b/apps/website/package.json
@@ -2,5 +2,6 @@
   "name": "@qwik-ui/website",
   "description": "The Qwik UI Website",
   "private": true,
-  "type": "module"
+  "type": "module",
+  "devDependencies": {}
 }
diff --git a/apps/website/recma-provide-components.ts b/apps/website/recma-provide-components.ts
@@ -105,7 +105,7 @@ export const recmaProvideComponents: Plugin<any, Program> = () => {
           local: { type: 'Identifier', name: '_inlinedQrl' },
         },
       ],
-      source: { type: 'Literal', value: '@builder.io/qwik' },
+      source: { type: 'Literal', value: '@qwik.dev/core' },
     });
   };
 };
diff --git a/apps/website/src/_state/MDXProvider.tsx b/apps/website/src/_state/MDXProvider.tsx
@@ -5,7 +5,7 @@ import {
   useContext,
   Slot,
   useContextProvider,
-} from '@builder.io/qwik';
+} from '@qwik.dev/core';
 
 export const MDXContext = createContextId<Components>('MDXContext');
 

diff --git a/apps/website/src/_state/app-state-context-id.ts b/apps/website/src/_state/app-state-context-id.ts
@@ -1,4 +1,4 @@
-import { createContextId } from '@builder.io/qwik';
+import { createContextId } from '@qwik.dev/core';
 import { AppState } from './app-state.type';
 
 export const APP_STATE_CONTEXT_ID = createContextId<AppState>('app-state-context-id');
diff --git a/apps/website/src/_state/use-app-state.ts b/apps/website/src/_state/use-app-state.ts
@@ -1,4 +1,4 @@
-import { useContext } from '@builder.io/qwik';
+import { useContext } from '@qwik.dev/core';
 import { APP_STATE_CONTEXT_ID } from './app-state-context-id';
 
 export const useAppState = () => {

diff --git a/apps/website/src/components/anatomy-table/anatomy-table.tsx b/apps/website/src/components/anatomy-table/anatomy-table.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 
 type AnatomyTableProps = {
   firstColumnLabel?: string;

diff --git a/apps/website/src/components/animations/caveats.tsx b/apps/website/src/components/animations/caveats.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 import { Note, NoteStatus } from '../note/note'; // Adjust the import path based on your structure
 
 export const TopLayerAnimationsCaveats = component$(() => {

diff --git a/apps/website/src/components/animations/compatability.tsx b/apps/website/src/components/animations/compatability.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 import { Note, NoteStatus } from '../note/note'; // Adjust the import path based on your structure
 
 export const BrowserAnimationsCompatability = component$(() => {

diff --git a/apps/website/src/components/api-table/api-table.tsx b/apps/website/src/components/api-table/api-table.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 import { InfoPopup } from '../info-popup/info-popup';
 export type APITableProps = {
   propDescriptors: {

diff --git a/apps/website/src/components/api-table/auto-api.tsx b/apps/website/src/components/api-table/auto-api.tsx
@@ -1,4 +1,4 @@
-import { JSXOutput, component$, $, QRL, useTask$, useSignal } from '@builder.io/qwik';
+import { JSXOutput, component$, $, QRL, useTask$, useSignal } from '@qwik.dev/core';
 import { APITable, type APITableProps } from './api-table';
 
 //This is a workaround for not being able to export across packages due to nx rule:

diff --git a/apps/website/src/components/code-copy/code-copy.tsx b/apps/website/src/components/code-copy/code-copy.tsx
@@ -1,4 +1,4 @@
-import { PropsOf, component$, useSignal } from '@builder.io/qwik';
+import { PropsOf, component$, useSignal } from '@qwik.dev/core';
 import { Button } from '~/components/ui';
 import { cn } from '@qwik-ui/utils';
 import copy from 'clipboard-copy';

diff --git a/apps/website/src/components/code-snippet/code-snippet.tsx b/apps/website/src/components/code-snippet/code-snippet.tsx
@@ -1,4 +1,4 @@
-import { PropsOf, component$ } from '@builder.io/qwik';
+import { PropsOf, component$ } from '@qwik.dev/core';
 import { Highlight } from '../highlight/highlight';
 
 type CodeSnippetProps = PropsOf<'div'> & {

diff --git a/apps/website/src/components/component-status-badge/component-status-badge.tsx b/apps/website/src/components/component-status-badge/component-status-badge.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 import { Badge } from '~/components/ui';
 import { ComponentStatus } from '~/_state/component-status.type';
 

diff --git a/apps/website/src/components/copy-css-config/copy-css-config.tsx b/apps/website/src/components/copy-css-config/copy-css-config.tsx
@@ -1,4 +1,4 @@
-import { component$, useSignal } from '@builder.io/qwik';
+import { component$, useSignal } from '@qwik.dev/core';
 import { Modal } from '@qwik-ui/headless';
 import { Button } from '~/components/ui';
 import { extractThemeCSS } from '@qwik-ui/utils';

diff --git a/apps/website/src/components/faq/faq.tsx b/apps/website/src/components/faq/faq.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 import { Accordion } from '@qwik-ui/styled';
 
 export const FAQ = component$(() => {

diff --git a/apps/website/src/components/feature-list/feature-list.tsx b/apps/website/src/components/feature-list/feature-list.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 import { Note } from '../note/note';
 import { LuBadge, LuBadgeAlert, LuBadgeCheck } from '@qwikest/icons/lucide';
 

diff --git a/apps/website/src/components/footer/footer.tsx b/apps/website/src/components/footer/footer.tsx
@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from '@qwik.dev/core';
 import { GitHubIcon } from '../icons/GitHubIcon';
 import { DiscordIcon } from '../icons/discord';
 import { cn } from '@qwik-ui/utils';

diff --git a/apps/website/src/components/header/header.tsx b/apps/website/src/components/header/header.tsx
@@ -5,11 +5,11 @@ import {
   useComputed$,
   useSignal,
   useStyles$,
-} from '@builder.io/qwik';
+} from '@qwik.dev/core';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { version as headlessVersion } from '../../../../../packages/kit-headless/package.json';
 // eslint-disable-next-line @nx/enforce-module-boundaries
-import { useLocation } from '@builder.io/qwik-city';
+import { useLocation } from '@qwik.dev/router';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { version as styledKitVersion } from '../../../../../packages/kit-styled/package.json';
@@ -38,19 +38,19 @@ export default component$(({ showVersion = false }: HeaderProps) => {
     .sidebar-mobile::backdrop {
       background: rgba(0,0,0,0.5);
     }
-  
+
     .sidebar-mobile {
       animation: sidebarOpen 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
     }
-  
+
     .sidebar-mobile::backdrop {
       animation: sidebarFadeIn 0.75s forwards cubic-bezier(0.6, 0.6, 0, 1);
     }
-  
+
     .sidebar-mobile.modal-closing {
       animation: sidebarClose 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
     }
-  
+
     .sidebar-mobile.modal-closing::backdrop {
       animation: sidebarFadeOut 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
     }
@@ -65,7 +65,7 @@ export default component$(({ showVersion = false }: HeaderProps) => {
         transform: translateX(0%);
       }
     }
-  
+
     @keyframes sidebarClose {
       from {
         opacity: 1;
@@ -76,7 +76,7 @@ export default component$(({ showVersion = false }: HeaderProps) => {
         transform: translateX(100%);
       }
     }
-  
+
     @keyframes sidebarFadeIn {
       from {
         opacity: 0;
@@ -85,7 +85,7 @@ export default component$(({ showVersion = false }: HeaderProps) => {
         opacity: 1;
       }
     }
-  
+
     @keyframes sidebarFadeOut {
       from {
         opacity: 1;
@@ -239,12 +239,12 @@ const DarkModeToggle = component$<PropsOf<typeof Button>>(({ ...props }) => {
         (themeSig.value = await switchLightDark(themeSig.value || 'light'))
       }
     >
-      <div class="hidden dark:block">
+      <span class="hidden dark:block">
         <LuMoon class="h-6 w-6" />
-      </div>
-      <div class="block dark:hidden">
+      </span>
+      <span class="block dark:hidden">
         <LuSun class="h-6 w-6" />
-      </div>
+      </span>
     </Button>
   );
 });
diff --git a/apps/website/src/components/highlight/highlight.tsx b/apps/website/src/components/highlight/highlight.tsx
@@ -1,4 +1,4 @@
-import { type ClassList, type PropsOf, component$ } from '@builder.io/qwik';
+import { type ClassList, type PropsOf, component$ } from '@qwik.dev/core';
 import { CodeCopy } from '../code-copy/code-copy';
 import { cn } from '@qwik-ui/utils';
 import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';

diff --git a/apps/website/src/components/icons/AstroLogo.tsx b/apps/website/src/components/icons/AstroLogo.tsx
@@ -1,4 +1,4 @@
-import { component$, type PropsOf } from '@builder.io/qwik';
+import { component$, type PropsOf } from '@qwik.dev/core';
 
 export default component$((props: PropsOf<'svg'>) => {
   return (

diff --git a/apps/website/src/components/icons/QwikLogo.tsx b/apps/website/src/components/icons/QwikLogo.tsx
@@ -1,4 +1,4 @@
-import { component$, type PropsOf } from '@builder.io/qwik';
+import { component$, type PropsOf } from '@qwik.dev/core';
 
 export default component$((props: PropsOf<'svg'>) => {
   return (

diff --git a/apps/website/src/components/icons/logo.tsx b/apps/website/src/components/icons/logo.tsx
@@ -1,4 +1,4 @@
-import { PropsOf, component$ } from '@builder.io/qwik';
+import { PropsOf, component$ } from '@qwik.dev/core';
 import { cn } from '@qwik-ui/utils';
 import { useTheme } from '@qwik-ui/themes';