diff --git a/.size-limit.js b/.size-limit.js
index 5e94a923e656..cbc2f411b628 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -61,6 +61,27 @@ module.exports = [
     gzip: true,
     limit: '50 KB',
   },
+  {
+    name: '@sentry/browser (incl. feedback2Integration) - Webpack (gzipped)',
+    path: 'packages/browser/build/npm/esm/index.js',
+    import: '{ init, feedback2Integration }',
+    gzip: true,
+    limit: '50 KB',
+  },
+  {
+    name: '@sentry/browser (incl. feedback2ModalIntegration) - Webpack (gzipped)',
+    path: 'packages/browser/build/npm/esm/index.js',
+    import: '{ init, feedback2Integration, feedback2ModalIntegration }',
+    gzip: true,
+    limit: '50 KB',
+  },
+  {
+    name: '@sentry/browser (incl. feedback2ScreenshotIntegration) - Webpack (gzipped)',
+    path: 'packages/browser/build/npm/esm/index.js',
+    import: '{ init, feedback2Integration, feedback2ModalIntegration, feedback2ScreenshotIntegration }',
+    gzip: true,
+    limit: '50 KB',
+  },
   {
     name: '@sentry/browser (incl. sendFeedback) - Webpack (gzipped)',
     path: 'packages/browser/build/npm/esm/index.js',
diff --git a/package.json b/package.json
index ef36567d47e3..414d4d00713b 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "packages/eslint-plugin-sdk",
     "packages/feedback",
     "packages/feedback-screenshot",
+    "packages/feedback2",
     "packages/gatsby",
     "packages/hub",
     "packages/integrations",
diff --git a/packages/feedback2/.eslintignore b/packages/feedback2/.eslintignore
new file mode 100644
index 000000000000..b38db2f296ff
--- /dev/null
+++ b/packages/feedback2/.eslintignore
@@ -0,0 +1,2 @@
+node_modules/
+build/
diff --git a/packages/feedback2/.eslintrc.js b/packages/feedback2/.eslintrc.js
new file mode 100644
index 000000000000..ef2ed992265c
--- /dev/null
+++ b/packages/feedback2/.eslintrc.js
@@ -0,0 +1,25 @@
+// Note: All paths are relative to the directory in which eslint is being run, rather than the directory where this file
+// lives
+
+// ESLint config docs: https://eslint.org/docs/user-guide/configuring/
+
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  overrides: [
+    {
+      files: ['src/**/*.ts', 'src/**/*.tsx'],
+      rules: {
+        '@sentry-internal/sdk/no-unsupported-es6-methods': 'off',
+      },
+    },
+    {
+      files: ['jest.setup.ts', 'jest.config.ts'],
+      parserOptions: {
+        project: ['tsconfig.test.json'],
+      },
+      rules: {
+        'no-console': 'off',
+      },
+    },
+  ],
+};
diff --git a/packages/feedback2/.gitignore b/packages/feedback2/.gitignore
new file mode 100644
index 000000000000..363d3467c6fa
--- /dev/null
+++ b/packages/feedback2/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+/*.tgz
+.eslintcache
+build
diff --git a/packages/feedback2/LICENSE b/packages/feedback2/LICENSE
new file mode 100644
index 000000000000..d11896ba1181
--- /dev/null
+++ b/packages/feedback2/LICENSE
@@ -0,0 +1,14 @@
+Copyright (c) 2023 Sentry (https://sentry.io) and individual contributors. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/packages/feedback2/README.md b/packages/feedback2/README.md
new file mode 100644
index 000000000000..fb5b20400a71
--- /dev/null
+++ b/packages/feedback2/README.md
@@ -0,0 +1,20 @@
+<p align="center">
+  <a href="https://sentry.io/?utm_source=github&utm_medium=logo" target="_blank">
+    <img src="https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png" alt="Sentry" width="280" height="84">
+  </a>
+</p>
+
+# Sentry Integration for Feedback
+
+This SDK is **considered experimental and in a beta state**. It may experience breaking changes, and may be discontinued at any time. Please reach out on
+[GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback/concerns.
+
+To view Feedback in Sentry, your [Sentry organization must be an early adopter](https://docs.sentry.io/product/accounts/early-adopter-features/).
+
+## Installation
+
+Please read the [offical integration documentation](https://docs.sentry.io/platforms/javascript/user-feedback/) for installation instructions.
+
+## Configuration
+
+The Feedback integration is highly customizable, please read the [official integration documentation](https://docs.sentry.io/platforms/javascript/user-feedback/configuration/) for the most up-to-date configuration options.
diff --git a/packages/feedback2/jest.config.js b/packages/feedback2/jest.config.js
new file mode 100644
index 000000000000..cd02790794a7
--- /dev/null
+++ b/packages/feedback2/jest.config.js
@@ -0,0 +1,6 @@
+const baseConfig = require('../../jest/jest.config.js');
+
+module.exports = {
+  ...baseConfig,
+  testEnvironment: 'jsdom',
+};
diff --git a/packages/feedback2/package.json b/packages/feedback2/package.json
new file mode 100644
index 000000000000..416ba4436049
--- /dev/null
+++ b/packages/feedback2/package.json
@@ -0,0 +1,64 @@
+{
+  "name": "@sentry-internal/feedback2",
+  "version": "7.100.0",
+  "description": "Sentry SDK integration for user feedback",
+  "repository": "git://github.com/getsentry/sentry-javascript.git",
+  "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/feedback",
+  "author": "Sentry",
+  "license": "MIT",
+  "engines": {
+    "node": ">=12"
+  },
+  "files": [
+    "cjs",
+    "esm",
+    "types",
+    "types-ts3.8"
+  ],
+  "main": "build/npm/cjs/index.js",
+  "module": "build/npm/esm/index.js",
+  "types": "build/npm/types/index.d.ts",
+  "typesVersions": {
+    "<4.9": {
+      "build/npm/types/index.d.ts": [
+        "build/npm/types-ts3.8/index.d.ts"
+      ]
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@sentry/core": "7.100.0",
+    "@sentry/types": "7.100.0",
+    "@sentry/utils": "7.100.0",
+    "preact": "^10.19.4",
+    "preact-compat": "^3.19.0"
+  },
+  "scripts": {
+    "build": "run-p build:transpile build:types build:bundle",
+    "build:transpile": "rollup -c rollup.npm.config.mjs",
+    "build:bundle": "rollup -c rollup.bundle.config.mjs",
+    "build:dev": "run-p build:transpile build:types",
+    "build:types": "run-s build:types:core build:types:downlevel",
+    "build:types:core": "tsc -p tsconfig.types.json",
+    "build:types:downlevel": "yarn downlevel-dts build/npm/types build/npm/types-ts3.8 --to ts3.8",
+    "build:watch": "run-p build:transpile:watch build:bundle:watch build:types:watch",
+    "build:dev:watch": "run-p build:transpile:watch build:types:watch",
+    "build:transpile:watch": "yarn build:transpile --watch",
+    "build:bundle:watch": "yarn build:bundle --watch",
+    "build:types:watch": "tsc -p tsconfig.types.json --watch",
+    "build:tarball": "ts-node ../../scripts/prepack.ts --bundles && npm pack ./build/npm",
+    "circularDepCheck": "madge --circular src/index.ts",
+    "clean": "rimraf build sentry-feedback-*.tgz",
+    "fix": "eslint . --format stylish --fix",
+    "lint": "eslint . --format stylish",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "yalc:publish": "ts-node ../../scripts/prepack.ts --bundles && yalc publish ./build/npm --push --sig"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "sideEffects": false
+}
diff --git a/packages/feedback2/rollup.bundle.config.mjs b/packages/feedback2/rollup.bundle.config.mjs
new file mode 100644
index 000000000000..32c9684415bf
--- /dev/null
+++ b/packages/feedback2/rollup.bundle.config.mjs
@@ -0,0 +1,15 @@
+import { makeBaseBundleConfig, makeBundleConfigVariants } from '@sentry-internal/rollup-utils';
+
+export default makeBundleConfigVariants(
+  makeBaseBundleConfig({
+    bundleType: 'addon',
+    entrypoints: ['src/index.ts'],
+    jsVersion: 'es6',
+    licenseTitle: '@sentry-internal/feedback2',
+    outputFileBase: () => 'bundles/feedback2',
+    sucrase: {
+      jsxPragma: 'h',
+      jsxFragmentPragma: 'Fragment',
+    },
+  }),
+);
diff --git a/packages/feedback2/rollup.npm.config.mjs b/packages/feedback2/rollup.npm.config.mjs
new file mode 100644
index 000000000000..80f2406e78db
--- /dev/null
+++ b/packages/feedback2/rollup.npm.config.mjs
@@ -0,0 +1,20 @@
+import { makeBaseNPMConfig, makeNPMConfigVariants } from '@sentry-internal/rollup-utils';
+
+export default makeNPMConfigVariants(
+  makeBaseNPMConfig({
+    hasBundles: true,
+    packageSpecificConfig: {
+      output: {
+        // set exports to 'named' or 'auto' so that rollup doesn't warn
+        exports: 'named',
+        // set preserveModules to false because for Feedback we actually want
+        // to bundle everything into one file.
+        preserveModules: false,
+      },
+    },
+    sucrase: {
+      jsxPragma: 'h',
+      jsxFragmentPragma: 'Fragment',
+    },
+  }),
+);
diff --git a/packages/feedback2/src/constants/index.ts b/packages/feedback2/src/constants/index.ts
new file mode 100644
index 000000000000..9804fdedf431
--- /dev/null
+++ b/packages/feedback2/src/constants/index.ts
@@ -0,0 +1,27 @@
+import { GLOBAL_OBJ } from '@sentry/utils';
+
+export { DEFAULT_THEME } from './theme';
+
+// exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
+// prevents the browser package from being bundled in the CDN bundle, and avoids a
+// circular dependency between the browser and feedback packages
+export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
+export const DOCUMENT = WINDOW.document;
+export const NAVIGATOR = WINDOW.navigator;
+
+export const ACTOR_LABEL = 'Report a Bug';
+export const CANCEL_BUTTON_LABEL = 'Cancel';
+export const SUBMIT_BUTTON_LABEL = 'Send Bug Report';
+export const FORM_TITLE = 'Report a Bug';
+export const EMAIL_PLACEHOLDER = 'your.email@example.org';
+export const EMAIL_LABEL = 'Email';
+export const MESSAGE_PLACEHOLDER = "What's the bug? What did you expect?";
+export const MESSAGE_LABEL = 'Description';
+export const NAME_PLACEHOLDER = 'Your Name';
+export const NAME_LABEL = 'Name';
+export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
+
+export const FEEDBACK_WIDGET_SOURCE = 'widget';
+export const FEEDBACK_API_SOURCE = 'api';
+
+export const SUCCESS_MESSAGE_TIMEOUT = 5000;
diff --git a/packages/feedback2/src/constants/theme.ts b/packages/feedback2/src/constants/theme.ts
new file mode 100644
index 000000000000..7fff31f48964
--- /dev/null
+++ b/packages/feedback2/src/constants/theme.ts
@@ -0,0 +1,55 @@
+const LIGHT_BACKGROUND = '#ffffff';
+const INHERIT = 'inherit';
+const SUBMIT_COLOR = 'rgba(108, 95, 199, 1)';
+
+export const LIGHT_THEME = {
+  fontFamily: "system-ui, 'Helvetica Neue', Arial, sans-serif",
+  fontSize: '14px',
+
+  background: LIGHT_BACKGROUND,
+  backgroundHover: '#f6f6f7',
+  foreground: '#2b2233',
+  border: '1.5px solid rgba(41, 35, 47, 0.13)',
+  borderRadius: '12px',
+  boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
+
+  success: '#268d75',
+  error: '#df3338',
+
+  submitBackground: 'rgba(88, 74, 192, 1)',
+  submitBackgroundHover: SUBMIT_COLOR,
+  submitBorder: SUBMIT_COLOR,
+  submitOutlineFocus: '#29232f',
+  submitForeground: LIGHT_BACKGROUND,
+  submitForegroundHover: LIGHT_BACKGROUND,
+
+  cancelBackground: 'transparent',
+  cancelBackgroundHover: 'var(--background-hover)',
+  cancelBorder: 'var(--border)',
+  cancelOutlineFocus: 'var(--input-outline-focus)',
+  cancelForeground: 'var(--foreground)',
+  cancelForegroundHover: 'var(--foreground)',
+
+  inputBackground: INHERIT,
+  inputForeground: INHERIT,
+  inputBorder: 'var(--border)',
+  inputOutlineFocus: SUBMIT_COLOR,
+
+  formBorderRadius: '20px',
+  formContentBorderRadius: '6px',
+};
+
+export const DEFAULT_THEME = {
+  light: LIGHT_THEME,
+  dark: {
+    ...LIGHT_THEME,
+
+    background: '#29232f',
+    backgroundHover: '#352f3b',
+    foreground: '#ebe6ef',
+    border: '1.5px solid rgba(235, 230, 239, 0.15)',
+
+    success: '#2da98c',
+    error: '#f55459',
+  },
+};
diff --git a/packages/feedback2/src/core/components/Actor.css.ts b/packages/feedback2/src/core/components/Actor.css.ts
new file mode 100644
index 000000000000..9ae8df503cc9
--- /dev/null
+++ b/packages/feedback2/src/core/components/Actor.css.ts
@@ -0,0 +1,63 @@
+import { DOCUMENT } from '../../constants';
+
+/**
+ * Creates <style> element for widget actor (button that opens the dialog)
+ */
+export function createActorStyles(): HTMLStyleElement {
+  const style = DOCUMENT.createElement('style');
+  style.textContent = `
+.widget__actor {
+  position: fixed;
+  left: var(--left);
+  right: var(--right);
+  bottom: var(--bottom);
+  top: var(--top);
+  z-index: var(--z-index);
+
+  line-height: 25px;
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 9000;
+
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 12px 16px;
+  text-decoration: none;
+
+  color: var(--foreground);
+  background-color: var(--background);
+  border: var(--border);
+  box-shadow: var(--box-shadow);
+  opacity: 1;
+  transition: opacity 0.1s ease-in-out;
+}
+
+.widget__actor:hover {
+  background-color: var(--background-hover);
+}
+
+.widget__actor svg {
+  width: 16px;
+  height: 16px;
+}
+
+.widget__actor--hidden {
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.widget__actor__text {
+}
+
+.feedback-icon path {
+  fill: var(--foreground);
+}
+`;
+
+  return style;
+}
diff --git a/packages/feedback2/src/core/components/Actor.ts b/packages/feedback2/src/core/components/Actor.ts
new file mode 100644
index 000000000000..fb49d5d1b7ee
--- /dev/null
+++ b/packages/feedback2/src/core/components/Actor.ts
@@ -0,0 +1,48 @@
+import { DOCUMENT } from '../../constants';
+import { createActorStyles } from './Actor.css';
+import { FeedbackIcon } from './FeedbackIcon';
+
+export interface ActorProps {
+  buttonLabel: string;
+  shadow: ShadowRoot;
+}
+
+export interface ActorComponent {
+  el: HTMLElement;
+
+  appendToDom: () => void;
+
+  removeFromDom: () => void;
+}
+
+/**
+ * The sentry-provided button to open the feedback modal
+ */
+export function Actor({ buttonLabel, shadow }: ActorProps): ActorComponent {
+  const el = DOCUMENT.createElement('button');
+  el.type = 'button';
+  el.className = 'widget__actor';
+  el.ariaHidden = 'false';
+  el.ariaLabel = buttonLabel;
+  el.appendChild(FeedbackIcon());
+  if (buttonLabel) {
+    const label = DOCUMENT.createElement('span');
+    label.className = 'widget__actor__text';
+    label.appendChild(DOCUMENT.createTextNode(buttonLabel));
+    el.appendChild(label);
+  }
+
+  const style = createActorStyles();
+
+  return {
+    el,
+    appendToDom(): void {
+      shadow.appendChild(style);
+      shadow.appendChild(el);
+    },
+    removeFromDom(): void {
+      shadow.removeChild(el);
+      shadow.removeChild(style);
+    },
+  };
+}
diff --git a/packages/feedback2/src/core/components/FeedbackIcon.ts b/packages/feedback2/src/core/components/FeedbackIcon.ts
new file mode 100644
index 000000000000..a6145ebf8900
--- /dev/null
+++ b/packages/feedback2/src/core/components/FeedbackIcon.ts
@@ -0,0 +1,49 @@
+import { WINDOW } from '../../constants';
+import { setAttributesNS } from '../../util/setAttributesNS';
+
+const SIZE = 20;
+const XMLNS = 'http://www.w3.org/2000/svg';
+
+/**
+ * Feedback Icon
+ */
+export function FeedbackIcon(): SVGElement {
+  const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
+    WINDOW.document.createElementNS(XMLNS, tagName);
+  const svg = setAttributesNS(createElementNS('svg'), {
+    class: 'feedback-icon',
+    width: `${SIZE}`,
+    height: `${SIZE}`,
+    viewBox: `0 0 ${SIZE} ${SIZE}`,
+    fill: 'none',
+  });
+
+  const g = setAttributesNS(createElementNS('g'), {
+    clipPath: 'url(#clip0_57_80)',
+  });
+
+  const path = setAttributesNS(createElementNS('path'), {
+    ['fill-rule']: 'evenodd',
+    ['clip-rule']: 'evenodd',
+    d: 'M15.6622 15H12.3997C12.2129 14.9959 12.031 14.9396 11.8747 14.8375L8.04965 12.2H7.49956V19.1C7.4875 19.3348 7.3888 19.5568 7.22256 19.723C7.05632 19.8892 6.83435 19.9879 6.59956 20H2.04956C1.80193 19.9968 1.56535 19.8969 1.39023 19.7218C1.21511 19.5467 1.1153 19.3101 1.11206 19.0625V12.2H0.949652C0.824431 12.2017 0.700142 12.1783 0.584123 12.1311C0.468104 12.084 0.362708 12.014 0.274155 11.9255C0.185602 11.8369 0.115689 11.7315 0.0685419 11.6155C0.0213952 11.4995 -0.00202913 11.3752 -0.00034808 11.25V3.75C-0.00900498 3.62067 0.0092504 3.49095 0.0532651 3.36904C0.0972798 3.24712 0.166097 3.13566 0.255372 3.04168C0.344646 2.94771 0.452437 2.87327 0.571937 2.82307C0.691437 2.77286 0.82005 2.74798 0.949652 2.75H8.04965L11.8747 0.1625C12.031 0.0603649 12.2129 0.00407221 12.3997 0H15.6622C15.9098 0.00323746 16.1464 0.103049 16.3215 0.278167C16.4966 0.453286 16.5964 0.689866 16.5997 0.9375V3.25269C17.3969 3.42959 18.1345 3.83026 18.7211 4.41679C19.5322 5.22788 19.9878 6.32796 19.9878 7.47502C19.9878 8.62209 19.5322 9.72217 18.7211 10.5333C18.1345 11.1198 17.3969 11.5205 16.5997 11.6974V14.0125C16.6047 14.1393 16.5842 14.2659 16.5395 14.3847C16.4948 14.5035 16.4268 14.6121 16.3394 14.7042C16.252 14.7962 16.147 14.8698 16.0307 14.9206C15.9144 14.9714 15.7891 14.9984 15.6622 15ZM1.89695 10.325H1.88715V4.625H8.33715C8.52423 4.62301 8.70666 4.56654 8.86215 4.4625L12.6872 1.875H14.7247V13.125H12.6872L8.86215 10.4875C8.70666 10.3835 8.52423 10.327 8.33715 10.325H2.20217C2.15205 10.3167 2.10102 10.3125 2.04956 10.3125C1.9981 10.3125 1.94708 10.3167 1.89695 10.325ZM2.98706 12.2V18.1625H5.66206V12.2H2.98706ZM16.5997 9.93612V5.01393C16.6536 5.02355 16.7072 5.03495 16.7605 5.04814C17.1202 5.13709 17.4556 5.30487 17.7425 5.53934C18.0293 5.77381 18.2605 6.06912 18.4192 6.40389C18.578 6.73866 18.6603 7.10452 18.6603 7.47502C18.6603 7.84552 18.578 8.21139 18.4192 8.54616C18.2605 8.88093 18.0293 9.17624 17.7425 9.41071C17.4556 9.64518 17.1202 9.81296 16.7605 9.90191C16.7072 9.91509 16.6536 9.9265 16.5997 9.93612Z',
+  });
+  svg.appendChild(g).appendChild(path);
+
+  const speakerDefs = createElementNS('defs');
+  const speakerClipPathDef = setAttributesNS(createElementNS('clipPath'), {
+    id: 'clip0_57_80',
+  });
+
+  const speakerRect = setAttributesNS(createElementNS('rect'), {
+    width: `${SIZE}`,
+    height: `${SIZE}`,
+    fill: 'white',
+  });
+
+  speakerClipPathDef.appendChild(speakerRect);
+  speakerDefs.appendChild(speakerClipPathDef);
+
+  svg.appendChild(speakerDefs).appendChild(speakerClipPathDef).appendChild(speakerRect);
+
+  return svg;
+}
diff --git a/packages/feedback2/src/core/createMainStyles.ts b/packages/feedback2/src/core/createMainStyles.ts
new file mode 100644
index 000000000000..87cf8c0605a0
--- /dev/null
+++ b/packages/feedback2/src/core/createMainStyles.ts
@@ -0,0 +1,73 @@
+import { DOCUMENT } from '../constants';
+import type { FeedbackTheme, FeedbackThemes } from '../types';
+
+function getThemedCssVariables(theme: FeedbackTheme): string {
+  return `
+  --background: ${theme.background};
+  --background-hover: ${theme.backgroundHover};
+  --foreground: ${theme.foreground};
+  --error: ${theme.error};
+  --success: ${theme.success};
+  --border: ${theme.border};
+  --border-radius: ${theme.borderRadius};
+  --box-shadow: ${theme.boxShadow};
+
+  --submit-background: ${theme.submitBackground};
+  --submit-background-hover: ${theme.submitBackgroundHover};
+  --submit-border: ${theme.submitBorder};
+  --submit-outline-focus: ${theme.submitOutlineFocus};
+  --submit-foreground: ${theme.submitForeground};
+  --submit-foreground-hover: ${theme.submitForegroundHover};
+
+  --cancel-background: ${theme.cancelBackground};
+  --cancel-background-hover: ${theme.cancelBackgroundHover};
+  --cancel-border: ${theme.cancelBorder};
+  --cancel-outline-focus: ${theme.cancelOutlineFocus};
+  --cancel-foreground: ${theme.cancelForeground};
+  --cancel-foreground-hover: ${theme.cancelForegroundHover};
+
+  --input-background: ${theme.inputBackground};
+  --input-foreground: ${theme.inputForeground};
+  --input-border: ${theme.inputBorder};
+  --input-outline-focus: ${theme.inputOutlineFocus};
+
+  --form-border-radius: ${theme.formBorderRadius};
+  --form-content-border-radius: ${theme.formContentBorderRadius};
+  `;
+}
+
+/**
+ * Creates <style> element for widget actor (button that opens the dialog)
+ */
+export function createMainStyles(colorScheme: 'system' | 'dark' | 'light', themes: FeedbackThemes): HTMLStyleElement {
+  const style = DOCUMENT.createElement('style');
+  style.textContent = `
+:host {
+  --bottom: 1rem;
+  --right: 1rem; /* this is the font-size of the page, not the shadowroot */
+  --top: auto;
+  --left: auto;
+  --z-index: 100000;
+  --font-family: ${themes.themeLight.fontFamily};
+  --font-size: ${themes.themeLight.fontSize};
+
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+
+  ${getThemedCssVariables(colorScheme === 'dark' ? themes.themeDark : themes.themeLight)}
+}
+
+${
+  colorScheme === 'system'
+    ? `
+@media (prefers-color-scheme: dark) {
+  :host {
+    ${getThemedCssVariables(themes.themeDark)}
+  }
+}`
+    : ''
+}
+}`;
+
+  return style;
+}
diff --git a/packages/feedback2/src/core/integration.ts b/packages/feedback2/src/core/integration.ts
new file mode 100644
index 000000000000..fb55f82c4fe6
--- /dev/null
+++ b/packages/feedback2/src/core/integration.ts
@@ -0,0 +1,277 @@
+import { defineIntegration, getClient } from '@sentry/core';
+import type { IntegrationFn, IntegrationFnResult } from '@sentry/types';
+import { isBrowser, logger } from '@sentry/utils';
+import {
+  ACTOR_LABEL,
+  CANCEL_BUTTON_LABEL,
+  DEFAULT_THEME,
+  DOCUMENT,
+  EMAIL_LABEL,
+  EMAIL_PLACEHOLDER,
+  FORM_TITLE,
+  MESSAGE_LABEL,
+  MESSAGE_PLACEHOLDER,
+  NAME_LABEL,
+  NAME_PLACEHOLDER,
+  SUBMIT_BUTTON_LABEL,
+  SUCCESS_MESSAGE_TEXT,
+} from '../constants';
+import type { IFeedback2ModalIntegration } from '../modal/integration';
+import type { IFeedback2ScreenshotIntegration } from '../screenshot/integration';
+import type {
+  Dialog,
+  FeedbackInternalOptions,
+  OptionalFeedbackConfiguration,
+  OverrideFeedbackConfiguration,
+} from '../types';
+import { DEBUG_BUILD } from '../util/debug-build';
+import { mergeOptions } from '../util/mergeOptions';
+import { Actor } from './components/Actor';
+import { createMainStyles } from './createMainStyles';
+import { sendFeedback } from './sendFeedback';
+
+type Unsubscribe = () => void;
+
+interface PublicFeedback2Integration {
+  attachTo: (el: Element | string, optionOverrides: OverrideFeedbackConfiguration) => () => void;
+  createWidget: (optionOverrides: OverrideFeedbackConfiguration & { shouldCreateActor?: boolean }) => Promise<Dialog>;
+  getWidget: () => Dialog | null;
+  remove: () => void;
+  openDialog: () => void;
+  closeDialog: () => void;
+  removeWidget: () => void;
+}
+export type IFeedback2Integration = IntegrationFnResult & PublicFeedback2Integration;
+
+export const _feedback2Integration = (({
+  // FeedbackGeneralConfiguration
+  id = 'sentry-feedback',
+  showBranding = true,
+  autoInject = true,
+  showEmail = true,
+  showName = true,
+  showScreenshot = true,
+  useSentryUser = {
+    email: 'email',
+    name: 'username',
+  },
+  isNameRequired = false,
+  isEmailRequired = false,
+
+  // FeedbackThemeConfiguration
+  colorScheme = 'system',
+  themeLight,
+  themeDark,
+
+  // FeedbackTextConfiguration
+  buttonLabel = ACTOR_LABEL,
+  cancelButtonLabel = CANCEL_BUTTON_LABEL,
+  submitButtonLabel = SUBMIT_BUTTON_LABEL,
+  formTitle = FORM_TITLE,
+  emailLabel = EMAIL_LABEL,
+  emailPlaceholder = EMAIL_PLACEHOLDER,
+  messageLabel = MESSAGE_LABEL,
+  messagePlaceholder = MESSAGE_PLACEHOLDER,
+  nameLabel = NAME_LABEL,
+  namePlaceholder = NAME_PLACEHOLDER,
+  successMessageText = SUCCESS_MESSAGE_TEXT,
+
+  // FeedbackCallbacks
+  onFormOpen,
+  onFormClose,
+  onSubmitSuccess,
+  onSubmitError,
+  onFormSubmitted,
+}: OptionalFeedbackConfiguration = {}) => {
+  const _options = {
+    id,
+    autoInject,
+    showBranding,
+    isEmailRequired,
+    isNameRequired,
+    showEmail,
+    showName,
+    showScreenshot,
+    useSentryUser,
+
+    colorScheme,
+    themeDark: {
+      ...DEFAULT_THEME.dark,
+      ...themeDark,
+    },
+    themeLight: {
+      ...DEFAULT_THEME.light,
+      ...themeLight,
+    },
+
+    buttonLabel,
+    cancelButtonLabel,
+    submitButtonLabel,
+    formTitle,
+    emailLabel,
+    emailPlaceholder,
+    messageLabel,
+    messagePlaceholder,
+    nameLabel,
+    namePlaceholder,
+    successMessageText,
+
+    onFormClose,
+    onFormOpen,
+    onSubmitError,
+    onSubmitSuccess,
+    onFormSubmitted,
+  };
+
+  let _shadow: ShadowRoot | null = null;
+  let _subscriptions: Unsubscribe[] = [];
+
+  /**
+   * Get the shadow root where we will append css
+   */
+  const _createShadow = (options: FeedbackInternalOptions): ShadowRoot => {
+    if (!_shadow) {
+      const host = DOCUMENT.createElement('div');
+      host.id = String(options.id);
+      DOCUMENT.body.appendChild(host);
+
+      _shadow = host.attachShadow({ mode: 'open' });
+      _shadow.appendChild(createMainStyles(options.colorScheme, options));
+    }
+    return _shadow as ShadowRoot;
+  };
+
+  const _loadAndRenderDialog = async (options: FeedbackInternalOptions): Promise<Dialog> => {
+    const client = getClient(); // TODO: getClient<BrowserClient>()
+    if (!client) {
+      throw new Error('Sentry Client is not initialized correctly');
+    }
+    const modalIntegration = client.getIntegrationByName<IFeedback2ModalIntegration>('Feedback2Modal');
+    const screenshotIntegration = client.getIntegrationByName<IFeedback2ScreenshotIntegration>('Feedback2Screenshot');
+
+    // START TEMP: Error messages
+    if (!modalIntegration && showScreenshot && !screenshotIntegration) {
+      throw new Error('Async loading of Feedback Modal & Screenshot integrations is not yet implemented');
+    } else if (!modalIntegration) {
+      throw new Error('Async loading of Feedback Modal is not yet implemented');
+    } else if (showScreenshot && !screenshotIntegration) {
+      throw new Error('Async loading of Feedback Screenshot integration is not yet implemented');
+    }
+    // END TEMP
+
+    if (!modalIntegration) {
+      // TODO: load modalIntegration
+      throw new Error('Not implemented yet');
+    }
+    if (showScreenshot && !screenshotIntegration) {
+      // TODO: load screenshotIntegration
+      throw new Error('Not implemented yet');
+    }
+
+    return modalIntegration.createDialog({
+      options,
+      screenshotIntegration,
+      sendFeedback,
+      shadow: _createShadow(options),
+    });
+  };
+
+  const attachTo = (el: Element | string, optionOverrides: OverrideFeedbackConfiguration = {}): Unsubscribe => {
+    const mergedOptions = mergeOptions(_options, optionOverrides);
+
+    const targetEl =
+      typeof el === 'string' ? DOCUMENT.querySelector(el) : typeof el.addEventListener === 'function' ? el : null;
+
+    if (!targetEl) {
+      DEBUG_BUILD && logger.error('[Feedback] Unable to attach to target element');
+      throw new Error('Unable to attach to target element');
+    }
+
+    let dialog: Dialog | null = null;
+    const handleClick = async (): Promise<void> => {
+      if (!dialog) {
+        dialog = await _loadAndRenderDialog({
+          ...mergedOptions,
+          onFormClose: () => {
+            dialog && dialog.close();
+            mergedOptions.onFormClose && mergedOptions.onFormClose();
+          },
+          onFormSubmitted: () => {
+            dialog && dialog.removeFromDom();
+            mergedOptions.onFormSubmitted && mergedOptions.onFormSubmitted();
+          },
+        });
+      }
+      dialog.appendToDom();
+      dialog.open();
+    };
+    targetEl.addEventListener('click', handleClick);
+    const unsubscribe = (): void => {
+      _subscriptions = _subscriptions.filter(sub => sub !== unsubscribe);
+      dialog && dialog.removeFromDom();
+      dialog = null;
+      targetEl.removeEventListener('click', handleClick);
+    };
+    _subscriptions.push(unsubscribe);
+    return unsubscribe;
+  };
+
+  const autoInjectActor = (): void => {
+    const shadow = _createShadow(_options);
+    const actor = Actor({ buttonLabel: _options.buttonLabel, shadow });
+    const mergedOptions = mergeOptions(_options, {
+      onFormOpen() {
+        actor.removeFromDom();
+      },
+      onFormClose() {
+        actor.appendToDom();
+      },
+      onFormSubmitted() {
+        actor.appendToDom();
+      },
+    });
+    attachTo(actor.el, mergedOptions);
+
+    actor.appendToDom();
+  };
+
+  return {
+    name: 'Feedback2',
+    setupOnce() {
+      if (!isBrowser() || !_options.autoInject) {
+        return;
+      }
+
+      autoInjectActor();
+    },
+
+    /**
+     * Adds click listener to the element to open a feedback dialog
+     *
+     * The returned function can be used to remove the click listener
+     */
+    attachTo,
+
+    /**
+     * Creates a new widget. Accepts partial options to override any options passed to constructor.
+     */
+    async createWidget(optionOverrides: OverrideFeedbackConfiguration = {}): Promise<Dialog> {
+      return _loadAndRenderDialog(mergeOptions(_options, optionOverrides));
+    },
+
+    /**
+     * Removes the Feedback integration (including host, shadow DOM, and all widgets)
+     */
+    remove(): void {
+      if (_shadow) {
+        _shadow.parentElement && _shadow.parentElement.remove();
+        _shadow = null;
+      }
+      // Remove any lingering subscriptions
+      _subscriptions.forEach(sub => sub());
+      _subscriptions = [];
+    },
+  };
+}) satisfies IntegrationFn;
+
+export const feedback2Integration = defineIntegration(_feedback2Integration);
diff --git a/packages/feedback2/src/core/sendFeedback.ts b/packages/feedback2/src/core/sendFeedback.ts
new file mode 100644
index 000000000000..db879f29a821
--- /dev/null
+++ b/packages/feedback2/src/core/sendFeedback.ts
@@ -0,0 +1,142 @@
+import { createAttachmentEnvelope, createEventEnvelope, getClient, withScope } from '@sentry/core';
+import type { FeedbackEvent, TransportMakeRequestResponse } from '@sentry/types';
+import { getLocationHref } from '@sentry/utils';
+import { FEEDBACK_API_SOURCE, FEEDBACK_WIDGET_SOURCE } from '../constants';
+import type { SendFeedbackOptions, SendFeedbackParams } from '../types';
+import { prepareFeedbackEvent } from '../util/prepareFeedbackEvent';
+
+/**
+ * Public API to send a Feedback item to Sentry
+ */
+export async function sendFeedback(
+  { name, email, message, attachments, source = FEEDBACK_API_SOURCE, url = getLocationHref() }: SendFeedbackParams,
+  { includeReplay = true }: SendFeedbackOptions = {},
+): Promise<TransportMakeRequestResponse> {
+  if (!message) {
+    throw new Error('Unable to submit feedback with empty message');
+  }
+
+  const client = getClient();
+  const transport = client && client.getTransport();
+  const dsn = client && client.getDsn();
+
+  if (!client || !transport || !dsn) {
+    throw new Error('Invalid Sentry client');
+  }
+
+  const baseEvent: FeedbackEvent = {
+    contexts: {
+      feedback: {
+        contact_email: email,
+        name,
+        message,
+        url,
+        source,
+      },
+    },
+    type: 'feedback',
+  };
+
+  return withScope(async scope => {
+    // No use for breadcrumbs in feedback
+    scope.clearBreadcrumbs();
+
+    if ([FEEDBACK_API_SOURCE, FEEDBACK_WIDGET_SOURCE].includes(String(source))) {
+      scope.setLevel('info');
+    }
+
+    const feedbackEvent = await prepareFeedbackEvent({
+      scope,
+      client,
+      event: baseEvent,
+    });
+
+    if (client.emit) {
+      client.emit('beforeSendFeedback', feedbackEvent, { includeReplay: Boolean(includeReplay) });
+    }
+
+    try {
+      const response = await transport.send(
+        createEventEnvelope(feedbackEvent, dsn, client.getOptions()._metadata, client.getOptions().tunnel),
+      );
+
+      if (attachments && attachments.length) {
+        // TODO: https://docs.sentry.io/platforms/javascript/enriching-events/attachments/
+        await transport.send(
+          createAttachmentEnvelope(
+            feedbackEvent,
+            attachments,
+            dsn,
+            client.getOptions()._metadata,
+            client.getOptions().tunnel,
+          ),
+        );
+      }
+
+      // TODO (v8): we can remove this guard once transport.send's type signature doesn't include void anymore
+      if (!response) {
+        throw new Error('Unable to send Feedback');
+      }
+
+      // Require valid status codes, otherwise can assume feedback was not sent successfully
+      if (typeof response.statusCode === 'number' && (response.statusCode < 200 || response.statusCode >= 300)) {
+        throw new Error('Unable to send Feedback. Invalid response from server.');
+      }
+
+      return response;
+    } catch (err) {
+      const error = new Error('Unable to send Feedback');
+
+      try {
+        // In case browsers don't allow this property to be writable
+        // @ts-expect-error This needs lib es2022 and newer
+        error.cause = err;
+      } catch {
+        // nothing to do
+      }
+      throw error;
+    }
+  });
+}
+
+/*
+ * For reference, the fully built event looks something like this:
+ * {
+ *     "type": "feedback",
+ *     "event_id": "d2132d31b39445f1938d7e21b6bf0ec4",
+ *     "timestamp": 1597977777.6189718,
+ *     "dist": "1.12",
+ *     "platform": "javascript",
+ *     "environment": "production",
+ *     "release": 42,
+ *     "tags": {"transaction": "/organizations/:orgId/performance/:eventSlug/"},
+ *     "sdk": {"name": "name", "version": "version"},
+ *     "user": {
+ *         "id": "123",
+ *         "username": "user",
+ *         "email": "user@site.com",
+ *         "ip_address": "192.168.11.12",
+ *     },
+ *     "request": {
+ *         "url": None,
+ *         "headers": {
+ *             "user-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15"
+ *         },
+ *     },
+ *     "contexts": {
+ *         "feedback": {
+ *             "message": "test message",
+ *             "contact_email": "test@example.com",
+ *             "type": "feedback",
+ *         },
+ *         "trace": {
+ *             "trace_id": "4C79F60C11214EB38604F4AE0781BFB2",
+ *             "span_id": "FA90FDEAD5F74052",
+ *             "type": "trace",
+ *         },
+ *         "replay": {
+ *             "replay_id": "e2d42047b1c5431c8cba85ee2a8ab25d",
+ *         },
+ *     },
+ *   }
+ */
diff --git a/packages/feedback2/src/index.ts b/packages/feedback2/src/index.ts
new file mode 100644
index 000000000000..bc57808e7b95
--- /dev/null
+++ b/packages/feedback2/src/index.ts
@@ -0,0 +1,7 @@
+export { sendFeedback } from './core/sendFeedback';
+export { feedback2Integration } from './core/integration';
+export { feedback2ModalIntegration } from './modal/integration';
+export { feedback2ScreenshotIntegration } from './screenshot/integration';
+
+export type { OptionalFeedbackConfiguration } from './types';
+export type { IFeedback2Integration } from './core/integration';
diff --git a/packages/feedback2/src/modal/components/Dialog.css.ts b/packages/feedback2/src/modal/components/Dialog.css.ts
new file mode 100644
index 000000000000..26c405d9ddb3
--- /dev/null
+++ b/packages/feedback2/src/modal/components/Dialog.css.ts
@@ -0,0 +1,224 @@
+import { DOCUMENT } from '../../constants';
+
+/**
+ * Creates <style> element for widget dialog
+ */
+export function createDialogStyles(): HTMLStyleElement {
+  const style = DOCUMENT.createElement('style');
+
+  style.textContent = `
+.dialog {
+  line-height: 25px;
+  background-color: rgba(0, 0, 0, 0.05);
+  border: none;
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.dialog:not([open]) {
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+}
+.dialog:not([open]) .dialog__content {
+  transform: translate(0, -16px) scale(0.98);
+}
+
+.dialog__content {
+  position: fixed;
+  left: var(--left);
+  right: var(--right);
+  bottom: var(--bottom);
+  top: var(--top);
+
+  border: var(--border);
+  border-radius: var(--form-border-radius);
+  background-color: var(--background);
+  color: var(--foreground);
+
+  max-width: 100%;
+  max-height: calc(100% - 2rem);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  box-shadow: var(--box-shadow);
+  transition: transform 0.2s ease-in-out;
+  transform: translate(0, 0) scale(1);
+
+  padding: 24px;
+}
+.dialog__content-fullscreen {
+  top: 16px;
+  left: 16px;
+}
+
+.dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0;
+
+}
+
+.brand-link {
+  display: inline-flex;
+}
+
+.error {
+  color: var(--error);
+}
+
+.form {
+  display: flex;
+  overflow: auto;
+  flex-direction: row;
+  gap: 16px;
+  flex: 1 0 auto;
+}
+
+.form__right {
+  width: 272px;
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 16px;
+
+}
+
+
+.form__error-container {
+  color: var(--error);
+}
+
+.form__label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0px;
+}
+
+.form__label__text {
+  display: grid;
+  gap: 4px;
+  align-items: center;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+}
+
+.form__label__text--required {
+  font-size: 0.85em;
+}
+
+.form__input {
+  font-family: inherit;
+  line-height: inherit;
+  background-color: var(--input-background);
+  box-sizing: border-box;
+  border: var(--input-border);
+  border-radius: var(--form-content-border-radius);
+  color: var(--input-foreground);
+  font-size: 14px;
+  font-weight: 500;
+  padding: 6px 12px;
+}
+
+.form__input:focus-visible {
+  outline: 1px auto var(--input-outline-focus);
+}
+
+.form__input--textarea {
+  font-family: inherit;
+  resize: vertical;
+}
+
+.btn-group {
+  display: grid;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.btn {
+  line-height: inherit;
+  border: var(--cancel-border);
+  border-radius: var(--form-content-border-radius);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 6px 16px;
+}
+.btn[disabled] {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.btn--primary {
+  background-color: var(--submit-background);
+  border-color: var(--submit-border);
+  color: var(--submit-foreground);
+}
+.btn--primary:hover {
+  background-color: var(--submit-background-hover);
+  color: var(--submit-foreground-hover);
+}
+.btn--primary:focus-visible {
+  outline: 1px auto var(--submit-outline-focus);
+}
+
+.btn--default {
+  background-color: var(--cancel-background);
+  color: var(--cancel-foreground);
+  font-weight: 500;
+}
+.btn--default:hover {
+  background-color: var(--cancel-background-hover);
+  color: var(--cancel-foreground-hover);
+}
+.btn--default:focus-visible {
+  outline: 1px auto var(--cancel-outline-focus);
+}
+
+.success-message {
+  position: fixed;
+  left: var(--left);
+  right: var(--right);
+  bottom: var(--bottom);
+  top: var(--top);
+  z-index: var(--z-index);
+
+  background-color: var(--background);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  font-weight: 600;
+  color: var(--success);
+  padding: 12px 24px;
+  line-height: 25px;
+  display: grid;
+  align-items: center;
+  grid-auto-flow: column;
+  gap: 6px;
+  cursor: default;
+}
+
+.success-icon {
+  display: flex;
+}
+
+.success-icon path {
+  fill: var(--success);
+}
+`;
+
+  return style;
+}
diff --git a/packages/feedback2/src/modal/components/DialogContainer.tsx b/packages/feedback2/src/modal/components/DialogContainer.tsx
new file mode 100644
index 000000000000..5888ec9a0663
--- /dev/null
+++ b/packages/feedback2/src/modal/components/DialogContainer.tsx
@@ -0,0 +1,58 @@
+// biome-ignore lint/nursery/noUnusedImports: reason
+import { Fragment, h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import type { VNode } from 'preact';
+import { useCallback, useMemo, useState } from 'preact/hooks';
+import { SUCCESS_MESSAGE_TIMEOUT } from '../../constants';
+import type { FeedbackFormData } from '../../types';
+import { DialogContent } from './DialogContent';
+import { DialogHeader } from './DialogHeader';
+import type { Props as HeaderProps } from './DialogHeader';
+import type { Props as FormProps } from './Form';
+import { Form } from './Form';
+import { SuccessIcon } from './SuccessIcon';
+
+interface Props extends HeaderProps, FormProps {
+  successMessageText: string;
+  onFormSubmitted: () => void;
+  open: boolean;
+}
+
+export function DialogComponent({ open, onFormSubmitted, successMessageText, ...props }: Props): VNode {
+  const successIconHtml = useMemo(() => ({ __html: SuccessIcon().outerHTML }), []);
+
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
+
+  const handlOnSuccessClick = useCallback(() => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      setTimeoutId(null);
+    }
+    onFormSubmitted();
+  }, [timeoutId]);
+
+  const onSubmitSuccess = useCallback(
+    (data: FeedbackFormData) => {
+      props.onSubmitSuccess(data);
+      setTimeoutId(() => setTimeout(onFormSubmitted, SUCCESS_MESSAGE_TIMEOUT));
+    },
+    [onFormSubmitted],
+  );
+
+  return (
+    <Fragment>
+      {timeoutId ? (
+        <div class="success-message" onClick={handlOnSuccessClick}>
+          {successMessageText}
+          <span class="success-icon" dangerouslySetInnerHTML={successIconHtml} />
+        </div>
+      ) : (
+        <dialog class="dialog" onClick={props.onFormClose} open={open}>
+          <DialogContent>
+            <DialogHeader {...props} />
+            <Form {...props} onSubmitSuccess={onSubmitSuccess} />
+          </DialogContent>
+        </dialog>
+      )}
+    </Fragment>
+  );
+}
diff --git a/packages/feedback2/src/modal/components/DialogContent.tsx b/packages/feedback2/src/modal/components/DialogContent.tsx
new file mode 100644
index 000000000000..0a8ebb54a990
--- /dev/null
+++ b/packages/feedback2/src/modal/components/DialogContent.tsx
@@ -0,0 +1,21 @@
+// biome-ignore lint/nursery/noUnusedImports: reason
+import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import type { ComponentChildren, VNode } from 'preact';
+
+export interface Props {
+  children: ComponentChildren;
+}
+
+export function DialogContent({ children }: Props): VNode {
+  return (
+    <div
+      class="dialog__content"
+      onClick={e => {
+        // Stop event propagation so clicks on content modal do not propagate to dialog (which will close dialog)
+        e.stopPropagation();
+      }}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/packages/feedback2/src/modal/components/DialogHeader.tsx b/packages/feedback2/src/modal/components/DialogHeader.tsx
new file mode 100644
index 000000000000..2af30b580b56
--- /dev/null
+++ b/packages/feedback2/src/modal/components/DialogHeader.tsx
@@ -0,0 +1,32 @@
+// biome-ignore lint/nursery/noUnusedImports: reason
+import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import type { VNode } from 'preact';
+import { useMemo } from 'preact/hooks';
+import type { FeedbackInternalOptions } from '../../types';
+import type { Props as LogoProps } from './SentryLogo';
+import { SentryLogo } from './SentryLogo';
+
+export interface Props extends LogoProps {
+  formTitle: FeedbackInternalOptions['formTitle'];
+  showBranding: FeedbackInternalOptions['showBranding'];
+}
+
+export function DialogHeader({ colorScheme, formTitle, showBranding }: Props): VNode {
+  const logoHtml = useMemo(() => ({ __html: SentryLogo({ colorScheme }).outerHTML }), [colorScheme]);
+
+  return (
+    <h2 class="dialog__header">
+      {formTitle}
+      {showBranding ? (
+        <a
+          class="brand-link"
+          target="_blank"
+          href="https://sentry.io/welcome/"
+          title="Powered by Sentry"
+          rel="noopener noreferrer"
+          dangerouslySetInnerHTML={logoHtml}
+        />
+      ) : null}
+    </h2>
+  );
+}
diff --git a/packages/feedback2/src/modal/components/Form.tsx b/packages/feedback2/src/modal/components/Form.tsx
new file mode 100644
index 000000000000..d4562b0b5ff6
--- /dev/null
+++ b/packages/feedback2/src/modal/components/Form.tsx
@@ -0,0 +1,233 @@
+import { logger } from '@sentry/utils';
+// biome-ignore lint/nursery/noUnusedImports: reason
+import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import type { JSX, VNode } from 'preact';
+import { useCallback, useState } from 'preact/hooks';
+import { FEEDBACK_WIDGET_SOURCE } from '../../constants';
+import type {
+  FeedbackFormData,
+  FeedbackInternalOptions,
+  ScreenshotInput,
+  SendFeedbackOptions,
+  SendFeedbackParams,
+} from '../../types';
+import { DEBUG_BUILD } from '../../util/debug-build';
+import { getMissingFields } from '../../util/validate';
+
+export interface Props
+  extends Pick<
+    FeedbackInternalOptions,
+    | 'cancelButtonLabel'
+    | 'emailLabel'
+    | 'emailPlaceholder'
+    | 'isEmailRequired'
+    | 'isNameRequired'
+    | 'messageLabel'
+    | 'messagePlaceholder'
+    | 'nameLabel'
+    | 'namePlaceholder'
+    | 'showEmail'
+    | 'showName'
+    | 'submitButtonLabel'
+  > {
+  defaultEmail: string;
+  defaultName: string;
+  onFormClose: () => void;
+  onSubmit: (data: SendFeedbackParams, options?: SendFeedbackOptions) => void;
+  onSubmitSuccess: (data: FeedbackFormData) => void;
+  onSubmitError: (error: Error) => void;
+  screenshotInput: ScreenshotInput | undefined;
+}
+
+function retrieveStringValue(formData: FormData, key: string): string {
+  const value = formData.get(key);
+  if (typeof value === 'string') {
+    return value.trim();
+  }
+  return '';
+}
+
+export function Form({
+  cancelButtonLabel,
+  defaultEmail,
+  defaultName,
+  emailLabel,
+  emailPlaceholder,
+  isEmailRequired,
+  isNameRequired,
+  messageLabel,
+  messagePlaceholder,
+  nameLabel,
+  namePlaceholder,
+  onFormClose,
+  onSubmit,
+  onSubmitSuccess,
+  onSubmitError,
+  showEmail,
+  showName,
+  submitButtonLabel,
+  screenshotInput,
+}: Props): VNode {
+  // TODO: set a ref on the form, and whenever an input changes call proceessForm() and setError()
+  const [error, setError] = useState<null | string>(null);
+
+  const [showScreenshotInput, setShowScreenshotInput] = useState(false);
+  const ScreenshotInput = screenshotInput && screenshotInput.input;
+  const includeScreenshotValue = ScreenshotInput && showScreenshotInput;
+
+  const [screenshotError, setScreenshotError] = useState<null | Error>(null);
+  const onScreenshotError = useCallback((error: Error) => {
+    setScreenshotError(error);
+    setShowScreenshotInput(false);
+  }, []);
+
+  const hasAllRequiredFields = useCallback(
+    (data: FeedbackFormData) => {
+      const missingFields = getMissingFields(data, {
+        emailLabel,
+        isEmailRequired,
+        isNameRequired,
+        messageLabel,
+        nameLabel,
+      });
+
+      if (missingFields.length > 0) {
+        setError(`Please enter in the following required fields: ${missingFields.join(', ')}`);
+      } else {
+        setError(null);
+      }
+
+      return missingFields.length === 0;
+    },
+    [emailLabel, isEmailRequired, isNameRequired, messageLabel, nameLabel],
+  );
+
+  const handleSubmit = useCallback(
+    async (e: JSX.TargetedSubmitEvent<HTMLFormElement>) => {
+      try {
+        e.preventDefault();
+        if (!(e.target instanceof HTMLFormElement)) {
+          return;
+        }
+        const formData = new FormData(e.target);
+        const attachment = await (includeScreenshotValue ? screenshotInput.value() : undefined);
+        const data: FeedbackFormData = {
+          name: retrieveStringValue(formData, 'name'),
+          email: retrieveStringValue(formData, 'email'),
+          message: retrieveStringValue(formData, 'message'),
+          attachments: attachment ? [attachment] : undefined,
+        };
+        if (!hasAllRequiredFields(data)) {
+          return;
+        }
+        try {
+          await onSubmit({ ...data, source: FEEDBACK_WIDGET_SOURCE });
+          onSubmitSuccess(data);
+        } catch (error) {
+          DEBUG_BUILD && logger.error(error);
+          setError('There was a problem submitting feedback, please wait and try again.');
+          onSubmitError(error as Error);
+        }
+      } catch {
+        // pass
+      }
+    },
+    [onSubmitSuccess, onSubmitError],
+  );
+
+  return (
+    <form class="form" onSubmit={handleSubmit}>
+      {includeScreenshotValue ? <ScreenshotInput onError={onScreenshotError} /> : null}
+
+      <div class="form__right">
+        <div class="form__top">
+          {error ? <div class="form__error-container">{error}</div> : null}
+
+          {showName ? (
+            <label for="name" class="form__label">
+              <LabelText label={nameLabel} isRequired={isNameRequired} />
+              <input
+                class="form__input"
+                defaultValue={defaultName}
+                id="name"
+                name="name"
+                placeholder={namePlaceholder}
+                required={isNameRequired}
+                type="text"
+              />
+            </label>
+          ) : (
+            <input aria-hidden value={defaultName} name="name" type="hidden" />
+          )}
+
+          {showEmail ? (
+            <label for="email" class="form__label">
+              <LabelText label={emailLabel} isRequired={isEmailRequired} />
+              <input
+                class="form__input"
+                defaultValue={defaultEmail}
+                id="email"
+                name="email"
+                placeholder={emailPlaceholder}
+                required={isEmailRequired}
+                type="text"
+              ></input>
+            </label>
+          ) : (
+            <input aria-hidden value={defaultEmail} name="email" type="hidden" />
+          )}
+
+          <label for="message" class="form__label">
+            <LabelText label={messageLabel} isRequired />
+            <textarea
+              autoFocus
+              class="form__input form__input--textarea"
+              id="message"
+              name="message"
+              placeholder={messagePlaceholder}
+              required={true}
+              rows={5}
+            />
+          </label>
+
+          {ScreenshotInput ? (
+            <label for="screenshot" class="form__label">
+              <span class="form__label__text">Screenshot</span>
+
+              <button
+                class="btn btn--default"
+                type="button"
+                onClick={() => {
+                  setScreenshotError(null);
+                  setShowScreenshotInput(prev => !prev);
+                }}
+              >
+                {showScreenshotInput ? 'Remove' : 'Add'}
+              </button>
+              {screenshotError ? <div class="form__error-container">{screenshotError.message}</div> : null}
+            </label>
+          ) : null}
+        </div>
+        <div class="form__bottom">
+          <div class="btn-group">
+            <button class="btn btn--primary" type="submit">
+              {submitButtonLabel}
+            </button>
+            <button class="btn btn--default" type="button" onClick={onFormClose}>
+              {cancelButtonLabel}
+            </button>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+function LabelText({ label, isRequired }: { label: string; isRequired: boolean }): VNode {
+  return (
+    <span class="form__label__text">
+      {label}
+      {isRequired && <span class="form__label__text--required">(required)</span>}
+    </span>
+  );
+}
diff --git a/packages/feedback2/src/modal/components/Icon.ts b/packages/feedback2/src/modal/components/Icon.ts
new file mode 100644
index 000000000000..93c1d3884c52
--- /dev/null
+++ b/packages/feedback2/src/modal/components/Icon.ts
@@ -0,0 +1,49 @@
+import { DOCUMENT } from '../../constants';
+import { setAttributesNS } from '../../util/setAttributesNS';
+
+const SIZE = 20;
+const XMLNS = 'http://www.w3.org/2000/svg';
+
+/**
+ * Feedback Icon
+ */
+export function Icon(): SVGElement {
+  const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
+    DOCUMENT.createElementNS(XMLNS, tagName);
+  const svg = setAttributesNS(createElementNS('svg'), {
+    class: 'feedback-icon',
+    width: `${SIZE}`,
+    height: `${SIZE}`,
+    viewBox: `0 0 ${SIZE} ${SIZE}`,
+    fill: 'none',
+  });
+
+  const g = setAttributesNS(createElementNS('g'), {
+    clipPath: 'url(#clip0_57_80)',
+  });
+
+  const path = setAttributesNS(createElementNS('path'), {
+    ['fill-rule']: 'evenodd',
+    ['clip-rule']: 'evenodd',
+    d: 'M15.6622 15H12.3997C12.2129 14.9959 12.031 14.9396 11.8747 14.8375L8.04965 12.2H7.49956V19.1C7.4875 19.3348 7.3888 19.5568 7.22256 19.723C7.05632 19.8892 6.83435 19.9879 6.59956 20H2.04956C1.80193 19.9968 1.56535 19.8969 1.39023 19.7218C1.21511 19.5467 1.1153 19.3101 1.11206 19.0625V12.2H0.949652C0.824431 12.2017 0.700142 12.1783 0.584123 12.1311C0.468104 12.084 0.362708 12.014 0.274155 11.9255C0.185602 11.8369 0.115689 11.7315 0.0685419 11.6155C0.0213952 11.4995 -0.00202913 11.3752 -0.00034808 11.25V3.75C-0.00900498 3.62067 0.0092504 3.49095 0.0532651 3.36904C0.0972798 3.24712 0.166097 3.13566 0.255372 3.04168C0.344646 2.94771 0.452437 2.87327 0.571937 2.82307C0.691437 2.77286 0.82005 2.74798 0.949652 2.75H8.04965L11.8747 0.1625C12.031 0.0603649 12.2129 0.00407221 12.3997 0H15.6622C15.9098 0.00323746 16.1464 0.103049 16.3215 0.278167C16.4966 0.453286 16.5964 0.689866 16.5997 0.9375V3.25269C17.3969 3.42959 18.1345 3.83026 18.7211 4.41679C19.5322 5.22788 19.9878 6.32796 19.9878 7.47502C19.9878 8.62209 19.5322 9.72217 18.7211 10.5333C18.1345 11.1198 17.3969 11.5205 16.5997 11.6974V14.0125C16.6047 14.1393 16.5842 14.2659 16.5395 14.3847C16.4948 14.5035 16.4268 14.6121 16.3394 14.7042C16.252 14.7962 16.147 14.8698 16.0307 14.9206C15.9144 14.9714 15.7891 14.9984 15.6622 15ZM1.89695 10.325H1.88715V4.625H8.33715C8.52423 4.62301 8.70666 4.56654 8.86215 4.4625L12.6872 1.875H14.7247V13.125H12.6872L8.86215 10.4875C8.70666 10.3835 8.52423 10.327 8.33715 10.325H2.20217C2.15205 10.3167 2.10102 10.3125 2.04956 10.3125C1.9981 10.3125 1.94708 10.3167 1.89695 10.325ZM2.98706 12.2V18.1625H5.66206V12.2H2.98706ZM16.5997 9.93612V5.01393C16.6536 5.02355 16.7072 5.03495 16.7605 5.04814C17.1202 5.13709 17.4556 5.30487 17.7425 5.53934C18.0293 5.77381 18.2605 6.06912 18.4192 6.40389C18.578 6.73866 18.6603 7.10452 18.6603 7.47502C18.6603 7.84552 18.578 8.21139 18.4192 8.54616C18.2605 8.88093 18.0293 9.17624 17.7425 9.41071C17.4556 9.64518 17.1202 9.81296 16.7605 9.90191C16.7072 9.91509 16.6536 9.9265 16.5997 9.93612Z',
+  });
+  svg.appendChild(g).appendChild(path);
+
+  const speakerDefs = createElementNS('defs');
+  const speakerClipPathDef = setAttributesNS(createElementNS('clipPath'), {
+    id: 'clip0_57_80',
+  });
+
+  const speakerRect = setAttributesNS(createElementNS('rect'), {
+    width: `${SIZE}`,
+    height: `${SIZE}`,
+    fill: 'white',
+  });
+
+  speakerClipPathDef.appendChild(speakerRect);
+  speakerDefs.appendChild(speakerClipPathDef);
+
+  svg.appendChild(speakerDefs).appendChild(speakerClipPathDef).appendChild(speakerRect);
+
+  return svg;
+}
diff --git a/packages/feedback2/src/modal/components/SentryLogo.ts b/packages/feedback2/src/modal/components/SentryLogo.ts
new file mode 100644
index 000000000000..1e32ad8efdcd
--- /dev/null
+++ b/packages/feedback2/src/modal/components/SentryLogo.ts
@@ -0,0 +1,53 @@
+import { DOCUMENT } from '../../constants';
+import type { FeedbackInternalOptions } from '../../types';
+import { setAttributesNS } from '../../util/setAttributesNS';
+
+const XMLNS = 'http://www.w3.org/2000/svg';
+
+export type Props = {
+  colorScheme: FeedbackInternalOptions['colorScheme'];
+};
+
+/**
+ * Sentry Logo
+ */
+export function SentryLogo({ colorScheme }: Props): SVGElement {
+  const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
+    DOCUMENT.createElementNS(XMLNS, tagName);
+  const svg = setAttributesNS(createElementNS('svg'), {
+    class: 'sentry-logo',
+    width: '32',
+    height: '30',
+    viewBox: '0 0 72 66',
+    fill: 'none',
+  });
+
+  const path = setAttributesNS(createElementNS('path'), {
+    transform: 'translate(11, 11)',
+    d: 'M29,2.26a4.67,4.67,0,0,0-8,0L14.42,13.53A32.21,32.21,0,0,1,32.17,40.19H27.55A27.68,27.68,0,0,0,12.09,17.47L6,28a15.92,15.92,0,0,1,9.23,12.17H4.62A.76.76,0,0,1,4,39.06l2.94-5a10.74,10.74,0,0,0-3.36-1.9l-2.91,5a4.54,4.54,0,0,0,1.69,6.24A4.66,4.66,0,0,0,4.62,44H19.15a19.4,19.4,0,0,0-8-17.31l2.31-4A23.87,23.87,0,0,1,23.76,44H36.07a35.88,35.88,0,0,0-16.41-31.8l4.67-8a.77.77,0,0,1,1.05-.27c.53.29,20.29,34.77,20.66,35.17a.76.76,0,0,1-.68,1.13H40.6q.09,1.91,0,3.81h4.78A4.59,4.59,0,0,0,50,39.43a4.49,4.49,0,0,0-.62-2.28Z',
+  });
+  svg.append(path);
+
+  const defs = createElementNS('defs');
+  const style = createElementNS('style');
+
+  style.textContent = `
+    path {
+      fill: ${colorScheme === 'dark' ? '#fff' : '#362d59'};
+    }`;
+
+  if (colorScheme === 'system') {
+    style.textContent += `
+    @media (prefers-color-scheme: dark) {
+      path: {
+        fill: '#fff';
+      }
+    }
+    `;
+  }
+
+  defs.append(style);
+  svg.append(defs);
+
+  return svg;
+}
diff --git a/packages/feedback2/src/modal/components/SuccessIcon.ts b/packages/feedback2/src/modal/components/SuccessIcon.ts
new file mode 100644
index 000000000000..fddd8c6fb941
--- /dev/null
+++ b/packages/feedback2/src/modal/components/SuccessIcon.ts
@@ -0,0 +1,54 @@
+import { WINDOW } from '../../constants';
+import { setAttributesNS } from '../../util/setAttributesNS';
+
+const WIDTH = 16;
+const HEIGHT = 17;
+const XMLNS = 'http://www.w3.org/2000/svg';
+
+/**
+ * Success Icon (checkmark)
+ */
+export function SuccessIcon(): SVGElement {
+  const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
+    WINDOW.document.createElementNS(XMLNS, tagName);
+  const svg = setAttributesNS(createElementNS('svg'), {
+    width: `${WIDTH}`,
+    height: `${HEIGHT}`,
+    viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
+    fill: 'none',
+  });
+
+  const g = setAttributesNS(createElementNS('g'), {
+    clipPath: 'url(#clip0_57_156)',
+  });
+
+  const path2 = setAttributesNS(createElementNS('path'), {
+    ['fill-rule']: 'evenodd',
+    ['clip-rule']: 'evenodd',
+    d: 'M3.55544 15.1518C4.87103 16.0308 6.41775 16.5 8 16.5C10.1217 16.5 12.1566 15.6571 13.6569 14.1569C15.1571 12.6566 16 10.6217 16 8.5C16 6.91775 15.5308 5.37103 14.6518 4.05544C13.7727 2.73985 12.5233 1.71447 11.0615 1.10897C9.59966 0.503466 7.99113 0.34504 6.43928 0.653721C4.88743 0.962403 3.46197 1.72433 2.34315 2.84315C1.22433 3.96197 0.462403 5.38743 0.153721 6.93928C-0.15496 8.49113 0.00346625 10.0997 0.608967 11.5615C1.21447 13.0233 2.23985 14.2727 3.55544 15.1518ZM4.40546 3.1204C5.46945 2.40946 6.72036 2.03 8 2.03C9.71595 2.03 11.3616 2.71166 12.575 3.92502C13.7883 5.13838 14.47 6.78405 14.47 8.5C14.47 9.77965 14.0905 11.0306 13.3796 12.0945C12.6687 13.1585 11.6582 13.9878 10.476 14.4775C9.29373 14.9672 7.99283 15.0953 6.73777 14.8457C5.48271 14.596 4.32987 13.9798 3.42502 13.075C2.52018 12.1701 1.90397 11.0173 1.65432 9.76224C1.40468 8.50718 1.5328 7.20628 2.0225 6.02404C2.5122 4.8418 3.34148 3.83133 4.40546 3.1204Z',
+  });
+  const path = setAttributesNS(createElementNS('path'), {
+    d: 'M6.68775 12.4297C6.78586 12.4745 6.89218 12.4984 7 12.5C7.11275 12.4955 7.22315 12.4664 7.32337 12.4145C7.4236 12.3627 7.51121 12.2894 7.58 12.2L12 5.63999C12.0848 5.47724 12.1071 5.28902 12.0625 5.11098C12.0178 4.93294 11.9095 4.77744 11.7579 4.67392C11.6064 4.57041 11.4221 4.52608 11.24 4.54931C11.0579 4.57254 10.8907 4.66173 10.77 4.79999L6.88 10.57L5.13 8.56999C5.06508 8.49566 4.98613 8.43488 4.89768 8.39111C4.80922 8.34735 4.713 8.32148 4.61453 8.31498C4.51605 8.30847 4.41727 8.32147 4.32382 8.35322C4.23038 8.38497 4.14413 8.43484 4.07 8.49999C3.92511 8.63217 3.83692 8.81523 3.82387 9.01092C3.81083 9.2066 3.87393 9.39976 4 9.54999L6.43 12.24C6.50187 12.3204 6.58964 12.385 6.68775 12.4297Z',
+  });
+
+  svg.appendChild(g).append(path, path2);
+
+  const speakerDefs = createElementNS('defs');
+  const speakerClipPathDef = setAttributesNS(createElementNS('clipPath'), {
+    id: 'clip0_57_156',
+  });
+
+  const speakerRect = setAttributesNS(createElementNS('rect'), {
+    width: `${WIDTH}`,
+    height: `${WIDTH}`,
+    fill: 'white',
+    transform: 'translate(0 0.5)',
+  });
+
+  speakerClipPathDef.appendChild(speakerRect);
+  speakerDefs.appendChild(speakerClipPathDef);
+
+  svg.appendChild(speakerDefs).appendChild(speakerClipPathDef).appendChild(speakerRect);
+
+  return svg;
+}
diff --git a/packages/feedback2/src/modal/createDialog.tsx b/packages/feedback2/src/modal/createDialog.tsx
new file mode 100644
index 000000000000..c0299c2edd30
--- /dev/null
+++ b/packages/feedback2/src/modal/createDialog.tsx
@@ -0,0 +1,94 @@
+import { getCurrentScope } from '@sentry/core';
+import { h, render } from 'preact';
+import { DOCUMENT } from '../constants';
+import type { sendFeedback as sendFeedbackFn } from '../core/sendFeedback';
+import type { IFeedback2ScreenshotIntegration } from '../screenshot/integration';
+import type { Dialog, FeedbackFormData, FeedbackInternalOptions } from '../types';
+import { createDialogStyles } from './components/Dialog.css';
+import { DialogComponent } from './components/DialogContainer';
+
+interface Props {
+  options: FeedbackInternalOptions;
+  screenshotIntegration: IFeedback2ScreenshotIntegration | undefined;
+  sendFeedback: typeof sendFeedbackFn;
+  shadow: ShadowRoot;
+}
+
+export function createDialog({ options, screenshotIntegration, sendFeedback, shadow }: Props): Dialog {
+  const userKey = options.useSentryUser;
+  const scope = getCurrentScope();
+  const user = scope && scope.getUser();
+
+  const el = DOCUMENT.createElement('div');
+  const style = createDialogStyles();
+
+  const dialog = {
+    get el() {
+      return el;
+    },
+    appendToDom(): void {
+      if (!shadow.contains(style) && !shadow.contains(el)) {
+        shadow.appendChild(style);
+        shadow.appendChild(el);
+      }
+    },
+    removeFromDom(): void {
+      shadow.removeChild(el);
+      shadow.removeChild(style);
+    },
+    open() {
+      renderContent(true);
+      options.onFormOpen && options.onFormOpen();
+    },
+    close() {
+      renderContent(false);
+    },
+  };
+
+  const screenshotInput = screenshotIntegration && screenshotIntegration.createInput(h, dialog);
+
+  const renderContent = (open: boolean): void => {
+    render(
+      <DialogComponent
+        screenshotInput={screenshotInput}
+        colorScheme={options.colorScheme}
+        showBranding={options.showBranding}
+        showName={options.showName || options.isNameRequired}
+        showEmail={options.showEmail || options.isEmailRequired}
+        isNameRequired={options.isNameRequired}
+        isEmailRequired={options.isEmailRequired}
+        formTitle={options.formTitle}
+        cancelButtonLabel={options.cancelButtonLabel}
+        submitButtonLabel={options.submitButtonLabel}
+        emailLabel={options.emailLabel}
+        emailPlaceholder={options.emailPlaceholder}
+        messageLabel={options.messageLabel}
+        messagePlaceholder={options.messagePlaceholder}
+        nameLabel={options.nameLabel}
+        namePlaceholder={options.namePlaceholder}
+        defaultName={(userKey && user && user[userKey.name]) || ''}
+        defaultEmail={(userKey && user && user[userKey.email]) || ''}
+        successMessageText={options.successMessageText}
+        onFormClose={() => {
+          renderContent(false);
+          options.onFormClose && options.onFormClose();
+        }}
+        onSubmit={sendFeedback}
+        onSubmitSuccess={(data: FeedbackFormData) => {
+          renderContent(false);
+          options.onSubmitSuccess && options.onSubmitSuccess(data);
+        }}
+        onSubmitError={(error: Error) => {
+          options.onSubmitError && options.onSubmitError(error);
+        }}
+        onFormSubmitted={() => {
+          options.onFormSubmitted && options.onFormSubmitted();
+        }}
+        open={open}
+      />,
+      el,
+    );
+  };
+
+  return dialog;
+}
diff --git a/packages/feedback2/src/modal/integration.ts b/packages/feedback2/src/modal/integration.ts
new file mode 100644
index 000000000000..33accceda743
--- /dev/null
+++ b/packages/feedback2/src/modal/integration.ts
@@ -0,0 +1,22 @@
+import { defineIntegration } from '@sentry/core';
+import type { IntegrationFn, IntegrationFnResult } from '@sentry/types';
+import { createDialog } from './createDialog';
+
+interface PublicFeedback2ModalIntegration {
+  createDialog: typeof createDialog;
+}
+
+const INTEGRATION_NAME = 'Feedback2Modal';
+
+export type IFeedback2ModalIntegration = IntegrationFnResult & PublicFeedback2ModalIntegration;
+
+export const _feedback2ModalIntegration = (() => {
+  return {
+    name: INTEGRATION_NAME,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setupOnce() {},
+    createDialog,
+  };
+}) satisfies IntegrationFn;
+
+export const feedback2ModalIntegration = defineIntegration(_feedback2ModalIntegration);
diff --git a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
new file mode 100644
index 000000000000..05af272d1a65
--- /dev/null
+++ b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
@@ -0,0 +1,61 @@
+import type { ComponentType, VNode, h as hType } from 'preact';
+import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks';
+import type { Dialog } from '../../types';
+import { createScreenshotInputStyles } from './ScreenshotInput.css';
+import { useTakeScreenshot } from './useTakeScreenshot';
+
+interface FactoryParams {
+  h: typeof hType;
+  canvas: HTMLCanvasElement;
+  dialog: Dialog;
+}
+
+interface Props {
+  onError: (error: Error) => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryParams): ComponentType<Props> {
+  return function ScreenshotEditor({ onError }: Props): VNode {
+    const styles = useMemo(() => ({ __html: createScreenshotInputStyles().innerText }), []);
+
+    const canvasContainerRef = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+      const container = canvasContainerRef.current;
+      container && container.appendChild(canvas);
+      return () => container && container.removeChild(canvas);
+    }, [canvas]);
+
+    useTakeScreenshot({
+      onBeforeScreenshot: useCallback(() => {
+        dialog.el.style.display = 'none';
+      }, []),
+      onScreenshot: useCallback(
+        (imageSource: HTMLVideoElement) => {
+          const context = canvas.getContext('2d');
+          if (!context) {
+            throw new Error('Could not get canvas context');
+          }
+          canvas.width = imageSource.videoWidth;
+          canvas.height = imageSource.videoHeight;
+          context.drawImage(imageSource, 0, 0);
+        },
+        [canvas],
+      ),
+      onAfterScreenshot: useCallback(() => {
+        dialog.el.style.display = 'block';
+      }, []),
+      onError: useCallback(error => {
+        dialog.el.style.display = 'block';
+        onError(error);
+      }, []),
+    });
+
+    return (
+      <div class="editor">
+        <style dangerouslySetInnerHTML={styles} />
+        <div class="canvasContainer" ref={canvasContainerRef} />
+      </div>
+    );
+  };
+}
diff --git a/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts b/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts
new file mode 100644
index 000000000000..62c05010e036
--- /dev/null
+++ b/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts
@@ -0,0 +1,52 @@
+import { DOCUMENT } from '../../constants';
+
+/**
+ * Creates <style> element for widget dialog
+ */
+export function createScreenshotInputStyles(): HTMLStyleElement {
+  const style = DOCUMENT.createElement('style');
+
+  const surface200 = '#FAF9FB';
+  const gray100 = '#F0ECF3';
+
+  style.textContent = `
+.dialog__content:has(.editor) {
+  top: var(--bottom);
+  left: var(--right);
+}
+
+.editor {
+  display: flex;
+  flex: 1 0 auto;
+
+  background-color: ${surface200};
+  background-image: repeating-linear-gradient(
+      -145deg,
+      transparent,
+      transparent 8px,
+      ${surface200} 8px,
+      ${surface200} 11px
+    ),
+    repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 15px,
+      ${gray100} 15px,
+      ${gray100} 16px
+    );
+}
+
+.canvasContainer {
+  flex: 1 0 auto;
+  display: contents;
+}
+
+.canvasContainer canvas {
+  flex: 1 0 auto;
+  width: 0; /* reasons... */
+  align-self: center;
+}
+`;
+
+  return style;
+}
diff --git a/packages/feedback2/src/screenshot/components/useTakeScreenshot.tsx b/packages/feedback2/src/screenshot/components/useTakeScreenshot.tsx
new file mode 100644
index 000000000000..8bfe3b3c5f14
--- /dev/null
+++ b/packages/feedback2/src/screenshot/components/useTakeScreenshot.tsx
@@ -0,0 +1,44 @@
+// biome-ignore lint/nursery/noUnusedImports: reason
+import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import { useEffect } from 'preact/hooks';
+import { DOCUMENT, NAVIGATOR, WINDOW } from '../../constants';
+
+interface Props {
+  onBeforeScreenshot: () => void;
+  onScreenshot: (imageSource: HTMLVideoElement) => void;
+  onAfterScreenshot: () => void;
+  onError: (error: Error) => void;
+}
+
+export const useTakeScreenshot = ({ onBeforeScreenshot, onScreenshot, onAfterScreenshot, onError }: Props): void => {
+  useEffect(() => {
+    const takeScreenshot = async (): Promise<void> => {
+      onBeforeScreenshot();
+      const stream = await NAVIGATOR.mediaDevices.getDisplayMedia({
+        video: {
+          width: WINDOW.innerWidth * WINDOW.devicePixelRatio,
+          height: WINDOW.innerHeight * WINDOW.devicePixelRatio,
+        },
+        audio: false,
+        // @ts-expect-error Experimental: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#prefercurrenttab
+        preferCurrentTab: true,
+        surfaceSwitching: 'exclude',
+      });
+
+      await new Promise<void>((resolve, reject) => {
+        const video = DOCUMENT.createElement('video');
+        const videoTrack = stream.getVideoTracks()[0];
+        video.srcObject = new MediaStream([videoTrack]);
+        video.onloadedmetadata = () => {
+          onScreenshot(video);
+          stream.getTracks().forEach(track => track.stop());
+          resolve();
+        };
+        video.play().catch(reject);
+      });
+      onAfterScreenshot();
+    };
+
+    takeScreenshot().catch(onError);
+  }, []);
+};
diff --git a/packages/feedback2/src/screenshot/createInput.ts b/packages/feedback2/src/screenshot/createInput.ts
new file mode 100644
index 000000000000..97855ada120b
--- /dev/null
+++ b/packages/feedback2/src/screenshot/createInput.ts
@@ -0,0 +1,33 @@
+import type { Attachment } from '@sentry/types';
+import type { h as hType } from 'preact';
+import { DOCUMENT } from '../constants';
+import type { Dialog, ScreenshotInput } from '../types';
+import { makeScreenshotEditorComponent } from './components/ScreenshotEditor';
+
+/**
+ *
+ */
+export function createInput(h: typeof hType, dialog: Dialog): ScreenshotInput {
+  const canvas = DOCUMENT.createElement('canvas');
+
+  return {
+    input: makeScreenshotEditorComponent({ h, canvas, dialog }),
+
+    value: async () => {
+      const blob = await new Promise<Parameters<BlobCallback>[0]>(resolve => {
+        canvas.toBlob(resolve, 'image/png');
+      });
+      if (blob) {
+        const data = new Uint8Array(await blob.arrayBuffer());
+        const attachment: Attachment = {
+          data,
+          filename: 'screenshot.png',
+          contentType: 'application/png',
+          // attachmentType?: string;
+        };
+        return attachment;
+      }
+      return;
+    },
+  };
+}
diff --git a/packages/feedback2/src/screenshot/integration.ts b/packages/feedback2/src/screenshot/integration.ts
new file mode 100644
index 000000000000..f98e2488cb33
--- /dev/null
+++ b/packages/feedback2/src/screenshot/integration.ts
@@ -0,0 +1,22 @@
+import { defineIntegration } from '@sentry/core';
+import type { IntegrationFn, IntegrationFnResult } from '@sentry/types';
+import { createInput } from './createInput';
+
+interface PublicFeedback2ScreenshotIntegration {
+  createInput: typeof createInput;
+}
+
+const INTEGRATION_NAME = 'Feedback2Screenshot';
+
+export type IFeedback2ScreenshotIntegration = IntegrationFnResult & PublicFeedback2ScreenshotIntegration;
+
+export const _feedback2ScreenshotIntegration = (() => {
+  return {
+    name: INTEGRATION_NAME,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setupOnce() {},
+    createInput: createInput,
+  };
+}) satisfies IntegrationFn;
+
+export const feedback2ScreenshotIntegration = defineIntegration(_feedback2ScreenshotIntegration);
diff --git a/packages/feedback2/src/types/config.ts b/packages/feedback2/src/types/config.ts
new file mode 100644
index 000000000000..0bcdcb0443cf
--- /dev/null
+++ b/packages/feedback2/src/types/config.ts
@@ -0,0 +1,170 @@
+import type { FeedbackFormData } from './form';
+import type { FeedbackTheme } from './theme';
+
+/**
+ * General feedback configuration
+ */
+export interface FeedbackGeneralConfiguration {
+  /**
+   * id to use for the main widget container (this will host the shadow DOM)
+   */
+  id: string;
+
+  /**
+   * Show the Sentry branding
+   */
+  showBranding: boolean;
+
+  /**
+   * Auto-inject default Feedback actor button to the DOM when integration is
+   * added.
+   */
+  autoInject: boolean;
+
+  /**
+   * Should the email field be required?
+   */
+  isEmailRequired: boolean;
+
+  /**
+   * Should the name field be required?
+   */
+  isNameRequired: boolean;
+
+  /**
+   * Should the email input field be visible? Note: email will still be collected if set via `Sentry.setUser()`
+   */
+  showEmail: boolean;
+
+  /**
+   * Should the name input field be visible? Note: name will still be collected if set via `Sentry.setUser()`
+   */
+  showName: boolean;
+
+  /**
+   * Should the screen shots field be included?
+   * Screen shots cannot be marked as required
+   */
+  showScreenshot: boolean;
+
+  /**
+   * Fill in email/name input fields with Sentry user context if it exists.
+   * The value of the email/name keys represent the properties of your user context.
+   */
+  useSentryUser: {
+    email: string;
+    name: string;
+  };
+}
+
+/**
+ * Theme-related configuration
+ */
+export interface FeedbackThemeConfiguration {
+  /**
+   * The colorscheme to use. "system" will choose the scheme based on the user's system settings
+   */
+  colorScheme: 'system' | 'light' | 'dark';
+
+  /**
+   * Light theme customization, will be merged with default theme values.
+   */
+  themeLight: FeedbackTheme;
+
+  /**
+   * Dark theme customization, will be merged with default theme values.
+   */
+  themeDark: FeedbackTheme;
+}
+
+/**
+ * All of the different text labels that can be customized
+ */
+export interface FeedbackTextConfiguration {
+  /**
+   * The label for the Feedback widget button that opens the dialog
+   */
+  buttonLabel: string;
+
+  /**
+   * The label for the Feedback form cancel button that closes dialog
+   */
+  cancelButtonLabel: string;
+
+  /**
+   * The label for the Feedback form submit button that sends feedback
+   */
+  submitButtonLabel: string;
+
+  /**
+   * The title of the Feedback form
+   */
+  formTitle: string;
+
+  /**
+   * Label for the email input
+   */
+  emailLabel: string;
+
+  /**
+   * Placeholder text for Feedback email input
+   */
+  emailPlaceholder: string;
+
+  /**
+   * Label for the message input
+   */
+  messageLabel: string;
+
+  /**
+   * Placeholder text for Feedback message input
+   */
+  messagePlaceholder: string;
+
+  /**
+   * Label for the name input
+   */
+  nameLabel: string;
+
+  /**
+   * Placeholder text for Feedback name input
+   */
+  namePlaceholder: string;
+
+  /**
+   * Message after feedback was sent successfully
+   */
+  successMessageText: string;
+}
+
+/**
+ * The public callbacks available for the feedback integration
+ */
+export interface FeedbackCallbacks {
+  /**
+   * Callback when form is opened
+   */
+  onFormOpen?: () => void;
+
+  /**
+   * Callback when form is closed and not submitted
+   */
+  onFormClose?: () => void;
+
+  /**
+   * Callback when feedback is successfully submitted
+   *
+   * After this you'll see a SuccessMessage on the screen for a moment.
+   */
+  onSubmitSuccess?: (data: FeedbackFormData) => void;
+
+  /**
+   * Callback when feedback is unsuccessfully submitted
+   */
+  onSubmitError?: (error: Error) => void;
+
+  /**
+   * Callback when the feedback form is submitted successfully, and the SuccessMessage is complete, or dismissed
+   */
+  onFormSubmitted?: () => void;
+}
diff --git a/packages/feedback2/src/types/form.ts b/packages/feedback2/src/types/form.ts
new file mode 100644
index 000000000000..d669ad7ea22e
--- /dev/null
+++ b/packages/feedback2/src/types/form.ts
@@ -0,0 +1,8 @@
+import type { Attachment } from '@sentry/types';
+
+export type FeedbackFormData = {
+  name: string;
+  email: string;
+  message: string;
+  attachments: Attachment[] | undefined;
+};
diff --git a/packages/feedback2/src/types/index.ts b/packages/feedback2/src/types/index.ts
new file mode 100644
index 000000000000..cee1bae6ab87
--- /dev/null
+++ b/packages/feedback2/src/types/index.ts
@@ -0,0 +1,101 @@
+import type { Attachment } from '@sentry/types';
+import type { ComponentType } from 'preact';
+import type {
+  FeedbackCallbacks,
+  FeedbackGeneralConfiguration,
+  FeedbackTextConfiguration,
+  FeedbackThemeConfiguration,
+} from './config';
+import type { FeedbackTheme } from './theme';
+
+export type { FeedbackFormData } from './form';
+
+export { FeedbackTheme };
+export interface FeedbackThemes {
+  themeDark: FeedbackTheme;
+  themeLight: FeedbackTheme;
+}
+
+/**
+ * The integration's internal `options` member where every value should be set
+ */
+export interface FeedbackInternalOptions
+  extends FeedbackGeneralConfiguration,
+    FeedbackThemeConfiguration,
+    FeedbackTextConfiguration,
+    FeedbackCallbacks {}
+
+/**
+ * Partial configuration that overrides default configuration values
+ *
+ * This is the config that gets passed into the integration constructor
+ */
+export interface OptionalFeedbackConfiguration
+  extends Omit<Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'> {
+  themeLight?: Partial<FeedbackTheme>;
+  themeDark?: Partial<FeedbackTheme>;
+}
+
+/**
+ * Partial configuration that overrides default configuration values
+ *
+ * This is the config that gets passed into the integration constructor
+ */
+export type OverrideFeedbackConfiguration = Omit<Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'>;
+
+export interface SendFeedbackParams {
+  message: string;
+  name?: string;
+  email?: string;
+  attachments?: Attachment[];
+  url?: string;
+  source?: string;
+}
+
+export interface SendFeedbackOptions {
+  /**
+   * Should include replay with the feedback?
+   */
+  includeReplay?: boolean;
+}
+
+export interface Dialog {
+  /**
+   * The HTMLElement that is containing all the form content
+   */
+  el: HTMLElement;
+
+  /**
+   * Insert the Dialog into the Shadow DOM.
+   *
+   * The Dialog starts in the `closed` state where no inner HTML is rendered.
+   */
+  appendToDom: () => void;
+
+  /**
+   * Remove the dialog from the Shadow DOM
+   */
+  removeFromDom: () => void;
+
+  /**
+   * Open/Show the dialog & form inside it
+   */
+  open: () => void;
+
+  /**
+   * Close/Hide the dialog & form inside it
+   */
+  close: () => void;
+}
+
+export interface ScreenshotInput {
+  /**
+   * The preact component
+   */
+  input: ComponentType<{ onError: (error: Error) => void }>;
+
+  /**
+   * The image/screenshot bytes
+   */
+  value: () => Promise<Attachment | undefined>;
+}
diff --git a/packages/feedback2/src/types/theme.ts b/packages/feedback2/src/types/theme.ts
new file mode 100644
index 000000000000..1bfb2e580a99
--- /dev/null
+++ b/packages/feedback2/src/types/theme.ts
@@ -0,0 +1,118 @@
+export interface FeedbackTheme {
+  /**
+   * Font family for widget
+   */
+  fontFamily: string;
+  /**
+   * Font size for widget
+   */
+  fontSize: string;
+  /**
+   * Background color for actor and dialog
+   */
+  background: string;
+  /**
+   * Background color on hover
+   */
+  backgroundHover: string;
+  /**
+   * Border styling for actor and dialog
+   */
+  border: string;
+  /**
+   * Border radius styling for actor
+   */
+  borderRadius: string;
+  /**
+   * Box shadow for actor and dialog
+   */
+  boxShadow: string;
+  /**
+   * Foreground color (i.e. text color)
+   */
+  foreground: string;
+  /**
+   * Success color
+   */
+  success: string;
+  /**
+   * Error color
+   */
+  error: string;
+
+  /**
+   * Background color for the submit button
+   */
+  submitBackground: string;
+  /**
+   * Background color when hovering over the submit button
+   */
+  submitBackgroundHover: string;
+  /**
+   * Border style for the submit button
+   */
+  submitBorder: string;
+  /**
+   * Border style for the submit button, in the focued state
+   */
+  submitOutlineFocus: string;
+  /**
+   * Foreground color for the submit button
+   */
+  submitForeground: string;
+
+  /**
+   * Foreground color for the submit button, in the hover state
+   */
+  submitForegroundHover: string;
+
+  /**
+   * Background color for the cancel button
+   */
+  cancelBackground: string;
+  /**
+   * Background color when hovering over the cancel button
+   */
+  cancelBackgroundHover: string;
+  /**
+   * Border style for the cancel button
+   */
+  cancelBorder: string;
+  /**
+   * Border style for the cancel button, in the focued state
+   */
+  cancelOutlineFocus: string;
+  /**
+   * Foreground color for the cancel button
+   */
+  cancelForeground: string;
+  /**
+   * Foreground color for the cancel button, in the hover state
+   */
+  cancelForegroundHover: string;
+
+  /**
+   * Background color for form inputs
+   */
+  inputBackground: string;
+  /**
+   * Foreground color for form inputs
+   */
+  inputForeground: string;
+  /**
+   * Border styles for form inputs
+   */
+  inputBorder: string;
+  /**
+   * Border styles for form inputs when focused
+   */
+  inputOutlineFocus: string;
+  /**
+   * Border radius for dialog
+   */
+  formBorderRadius: string;
+  /**
+   * Border radius for form inputs
+   */
+  formContentBorderRadius: string;
+}
diff --git a/packages/feedback2/src/util/debug-build.ts b/packages/feedback2/src/util/debug-build.ts
new file mode 100644
index 000000000000..60aa50940582
--- /dev/null
+++ b/packages/feedback2/src/util/debug-build.ts
@@ -0,0 +1,8 @@
+declare const __DEBUG_BUILD__: boolean;
+
+/**
+ * This serves as a build time flag that will be true by default, but false in non-debug builds or if users replace `__SENTRY_DEBUG__` in their generated code.
+ *
+ * ATTENTION: This constant must never cross package boundaries (i.e. be exported) to guarantee that it can be used for tree shaking.
+ */
+export const DEBUG_BUILD = __DEBUG_BUILD__;
diff --git a/packages/feedback2/src/util/mergeOptions.ts b/packages/feedback2/src/util/mergeOptions.ts
new file mode 100644
index 000000000000..da7f4c271f14
--- /dev/null
+++ b/packages/feedback2/src/util/mergeOptions.ts
@@ -0,0 +1,42 @@
+import type { FeedbackFormData, FeedbackInternalOptions, OptionalFeedbackConfiguration } from '../types';
+
+/**
+ * Quick and dirty deep merge for the Feedback integration options
+ */
+export function mergeOptions(
+  defaultOptions: FeedbackInternalOptions,
+  optionOverrides: OptionalFeedbackConfiguration,
+): FeedbackInternalOptions {
+  return {
+    ...defaultOptions,
+    ...optionOverrides,
+    onFormOpen: () => {
+      optionOverrides.onFormOpen && optionOverrides.onFormOpen();
+      defaultOptions.onFormOpen && defaultOptions.onFormOpen();
+    },
+    onFormClose: () => {
+      optionOverrides.onFormClose && optionOverrides.onFormClose();
+      defaultOptions.onFormClose && defaultOptions.onFormClose();
+    },
+    onSubmitSuccess: (data: FeedbackFormData) => {
+      optionOverrides.onSubmitSuccess && optionOverrides.onSubmitSuccess(data);
+      defaultOptions.onSubmitSuccess && defaultOptions.onSubmitSuccess(data);
+    },
+    onSubmitError: (error: Error) => {
+      optionOverrides.onSubmitError && optionOverrides.onSubmitError(error);
+      defaultOptions.onSubmitError && defaultOptions.onSubmitError(error);
+    },
+    onFormSubmitted: () => {
+      optionOverrides.onFormSubmitted && optionOverrides.onFormSubmitted();
+      defaultOptions.onFormSubmitted && defaultOptions.onFormSubmitted();
+    },
+    themeDark: {
+      ...defaultOptions.themeDark,
+      ...optionOverrides.themeDark,
+    },
+    themeLight: {
+      ...defaultOptions.themeLight,
+      ...optionOverrides.themeLight,
+    },
+  };
+}
diff --git a/packages/feedback2/src/util/prepareFeedbackEvent.ts b/packages/feedback2/src/util/prepareFeedbackEvent.ts
new file mode 100644
index 000000000000..0d66d251c6ff
--- /dev/null
+++ b/packages/feedback2/src/util/prepareFeedbackEvent.ts
@@ -0,0 +1,43 @@
+import { getIsolationScope, prepareEvent } from '@sentry/core';
+import type { Client, FeedbackEvent, Scope } from '@sentry/types';
+
+interface PrepareFeedbackEventParams {
+  client: Client;
+  event: FeedbackEvent;
+  scope: Scope;
+}
+/**
+ * Prepare a feedback event & enrich it with the SDK metadata.
+ */
+export async function prepareFeedbackEvent({
+  client,
+  scope,
+  event,
+}: PrepareFeedbackEventParams): Promise<FeedbackEvent> {
+  const eventHint = {};
+  if (client.emit) {
+    client.emit('preprocessEvent', event, eventHint);
+  }
+
+  const preparedEvent = (await prepareEvent(
+    client.getOptions(),
+    event,
+    eventHint,
+    scope,
+    client,
+    getIsolationScope(),
+  )) as FeedbackEvent | null;
+
+  if (preparedEvent === null) {
+    // Taken from baseclient's `_processEvent` method, where this is handled for errors/transactions
+    client.recordDroppedEvent('event_processor', 'feedback', event);
+    throw new Error('Unable to prepare event');
+  }
+
+  // This normally happens in browser client "_prepareEvent"
+  // but since we do not use this private method from the client, but rather the plain import
+  // we need to do this manually.
+  preparedEvent.platform = preparedEvent.platform || 'javascript';
+
+  return preparedEvent;
+}
diff --git a/packages/feedback2/src/util/setAttributesNS.ts b/packages/feedback2/src/util/setAttributesNS.ts
new file mode 100644
index 000000000000..74f0889a1f83
--- /dev/null
+++ b/packages/feedback2/src/util/setAttributesNS.ts
@@ -0,0 +1,9 @@
+/**
+ * Helper function to set a dict of attributes on element (w/ specified namespace)
+ */
+export function setAttributesNS<T extends SVGElement>(el: T, attributes: Record<string, string>): T {
+  Object.entries(attributes).forEach(([key, val]) => {
+    el.setAttributeNS(null, key, val);
+  });
+  return el;
+}
diff --git a/packages/feedback2/src/util/validate.ts b/packages/feedback2/src/util/validate.ts
new file mode 100644
index 000000000000..5ab14743bf03
--- /dev/null
+++ b/packages/feedback2/src/util/validate.ts
@@ -0,0 +1,24 @@
+import type { FeedbackFormData, FeedbackInternalOptions } from '../types';
+
+export type Props = Pick<
+  FeedbackInternalOptions,
+  'emailLabel' | 'isEmailRequired' | 'isNameRequired' | 'messageLabel' | 'nameLabel'
+>;
+
+/**
+ * Validate that a given feedback submission has the required fields
+ */
+export function getMissingFields(feedback: FeedbackFormData, props: Props): string[] {
+  const emptyFields = [];
+  if (props.isNameRequired && !feedback.name) {
+    emptyFields.push(props.nameLabel);
+  }
+  if (props.isEmailRequired && !feedback.email) {
+    emptyFields.push(props.emailLabel);
+  }
+  if (!feedback.message) {
+    emptyFields.push(props.messageLabel);
+  }
+
+  return emptyFields;
+}
diff --git a/packages/feedback2/tsconfig.json b/packages/feedback2/tsconfig.json
new file mode 100644
index 000000000000..446432e02a39
--- /dev/null
+++ b/packages/feedback2/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+
+   /* Preact Config */
+		"jsx": "react-jsx",
+		"jsxImportSource": "preact",
+		"skipLibCheck": true,
+		"baseUrl": "./",
+		"paths": {
+			"react": ["./node_modules/preact/compat/"],
+			"react-dom": ["./node_modules/preact/compat/"]
+		}
+  },
+  "include": ["src/**/*.ts","src/**/*.tsx"]
+}
diff --git a/packages/feedback2/tsconfig.test.json b/packages/feedback2/tsconfig.test.json
new file mode 100644
index 000000000000..ad87caa06c48
--- /dev/null
+++ b/packages/feedback2/tsconfig.test.json
@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+
+  "include": ["test/**/*.ts", "jest.config.ts", "jest.setup.ts"],
+
+  "compilerOptions": {
+    "types": ["node", "jest"],
+    "esModuleInterop": true,
+    "allowJs": true,
+    "noImplicitAny": true,
+    "noImplicitThis": false,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": false
+  }
+}
diff --git a/packages/feedback2/tsconfig.types.json b/packages/feedback2/tsconfig.types.json
new file mode 100644
index 000000000000..374fd9bc9364
--- /dev/null
+++ b/packages/feedback2/tsconfig.types.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "build/npm/types"
+  }
+}
diff --git a/packages/types/src/feedback.ts b/packages/types/src/feedback.ts
index 360064cda833..37dfe9818994 100644
--- a/packages/types/src/feedback.ts
+++ b/packages/types/src/feedback.ts
@@ -1,6 +1,17 @@
 import type { Event } from './event';
+import type { User } from './user';
 
-export interface FeedbackContext extends Record<string, unknown> {
+/**
+ * Crash report feedback object
+ */
+export interface UserFeedback {
+  event_id: string;
+  email: User['email'];
+  name: string;
+  comments: string;
+}
+
+interface FeedbackContext extends Record<string, unknown> {
   message: string;
   contact_email?: string;
   name?: string;
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 6a5f14d7b03c..4c95f641a753 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -69,7 +69,7 @@ export type {
   Profile,
 } from './profiling';
 export type { ReplayEvent, ReplayRecordingData, ReplayRecordingMode } from './replay';
-export type { FeedbackEvent } from './feedback';
+export type { FeedbackEvent, UserFeedback } from './feedback';
 export type { QueryParams, Request, SanitizedRequestData } from './request';
 export type { Runtime } from './runtime';
 export type { CaptureContext, Scope, ScopeContext, ScopeData } from './scope';
@@ -130,7 +130,7 @@ export type {
   BaseTransportOptions,
   TransportRequestExecutor,
 } from './transport';
-export type { User, UserFeedback } from './user';
+export type { User } from './user';
 export type { WebFetchHeaders, WebFetchRequest } from './webfetchapi';
 export type { WrappedFunction } from './wrappedfunction';
 export type { Instrumenter } from './instrumenter';
diff --git a/packages/types/src/user.ts b/packages/types/src/user.ts
index afbb42261ab3..ba8e32a3d469 100644
--- a/packages/types/src/user.ts
+++ b/packages/types/src/user.ts
@@ -8,10 +8,3 @@ export interface User {
   email?: string;
   username?: string;
 }
-
-export interface UserFeedback {
-  event_id: string;
-  email: User['email'];
-  name: string;
-  comments: string;
-}