code · pull · Jun 30, 2026 · Jun 29, 2026 · Jun 29, 2026
diff --git a/apps/vr-tests-web-components/package.json b/apps/vr-tests-web-components/package.json
@@ -17,7 +17,7 @@
     "react-dom": "19.2.0",
     "html-react-parser": "4.0.0",
     "@fluentui/tokens": ">=1.0.0-alpha",
-    "@fluentui/web-components": ">=3.0.0-alpha",
+    "@fluentui/web-components": "*",
     "@microsoft/fast-element": "^3.0.0",
     "tslib": "^2.1.0"
   }

diff --git a/packages/charts/chart-web-components/CHANGELOG.json b/packages/charts/chart-web-components/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/chart-web-components",
   "entries": [
+    {
+      "date": "Mon, 29 Jun 2026 22:18:05 GMT",
+      "tag": "@fluentui/chart-web-components_v0.0.90",
+      "version": "0.0.90",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/chart-web-components",
+            "comment": "Bump @fluentui/web-components to v3.0.0",
+            "commit": "46be5ff69017aa8c930060023ac80959ce880165"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 29 Jun 2026 04:08:42 GMT",
       "tag": "@fluentui/chart-web-components_v0.0.89",

diff --git a/packages/charts/chart-web-components/CHANGELOG.md b/packages/charts/chart-web-components/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/chart-web-components
 
-This log was last generated on Mon, 29 Jun 2026 04:08:42 GMT and should not be manually modified.
+This log was last generated on Mon, 29 Jun 2026 22:18:05 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.0.90](https://github.com/microsoft/fluentui/tree/@fluentui/chart-web-components_v0.0.90)
+
+Mon, 29 Jun 2026 22:18:05 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/chart-web-components_v0.0.89..@fluentui/chart-web-components_v0.0.90)
+
+### Patches
+
+- Bump @fluentui/web-components to v3.0.0 ([PR #36356](https://github.com/microsoft/fluentui/pull/36356) by beachball)
+
 ## [0.0.89](https://github.com/microsoft/fluentui/tree/@fluentui/chart-web-components_v0.0.89)
 
 Mon, 29 Jun 2026 04:08:42 GMT 

diff --git a/packages/charts/chart-web-components/package.json b/packages/charts/chart-web-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@fluentui/chart-web-components",
   "description": "A library of Fluent Chart Web Components",
-  "version": "0.0.89",
+  "version": "0.0.90",
   "author": {
     "name": "Microsoft"
   },
@@ -69,7 +69,7 @@
   "dependencies": {
     "@microsoft/fast-web-utilities": "^6.0.0",
     "@fluentui/tokens": "^1.0.0-alpha.23",
-    "@fluentui/web-components": "^3.0.0-rc.31",
+    "@fluentui/web-components": "^3.0.0",
     "@types/d3-selection": "^3.0.0",
     "@types/d3-shape": "^3.0.0",
     "d3-selection": "^3.0.0",

diff --git a/packages/web-components/CHANGELOG.json b/packages/web-components/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/web-components",
   "entries": [
+    {
+      "date": "Mon, 29 Jun 2026 22:18:05 GMT",
+      "tag": "@fluentui/web-components_v3.0.0",
+      "version": "3.0.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "7559015+janechu@users.noreply.github.com",
+            "package": "@fluentui/web-components",
+            "commit": "46be5ff69017aa8c930060023ac80959ce880165",
+            "comment": "Promote @fluentui/web-components to 3.0.0 stable release."
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 29 Jun 2026 04:08:41 GMT",
       "tag": "@fluentui/web-components_v3.0.0-rc.31",

diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Mon, 29 Jun 2026 04:08:41 GMT and should not be manually modified.
+This log was last generated on Mon, 29 Jun 2026 22:18:05 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0)
+
+Mon, 29 Jun 2026 22:18:05 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.31..@fluentui/web-components_v3.0.0)
+
+### Patches
+
+- Promote @fluentui/web-components to 3.0.0 stable release. ([PR #36356](https://github.com/microsoft/fluentui/pull/36356) by 7559015+janechu@users.noreply.github.com)
+
 ## [3.0.0-rc.31](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.31)
 
 Mon, 29 Jun 2026 04:08:41 GMT 

diff --git a/packages/web-components/README.md b/packages/web-components/README.md
@@ -1,7 +1,7 @@
 # Fluent UI Web Components
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![npm version](https://img.shields.io/npm/v/@fluentui/web-components/beta?style=flat-square)](https://www.npmjs.com/package/@fluentui/web-components/v/beta)
+[![npm version](https://img.shields.io/npm/v/@fluentui/web-components?/style=flat-square)](https://www.npmjs.com/package/@fluentui/web-components)
 
 Microsoft's [Fluent UI Web Components](https://github.com/microsoft/fluentui/tree/master/packages/web-components) is designed to help you build web apps using Web Components styled with the [Fluent design language](https://github.com/microsoft/fluentui).
 
@@ -14,43 +14,52 @@ Fluent UI should be installed as a `dependency` of your app.
 **Yarn**
 
 ```sh
-yarn add @fluentui/web-components@beta
+yarn add @fluentui/web-components
 ```
 
 **NPM**
 
 ```sh
-npm i @fluentui/web-components@beta
+npm i @fluentui/web-components
 ```
 
 **pnpm**
 
 ```sh
-pnpm add @fluentui/web-components@beta
+pnpm add @fluentui/web-components
 ```
 
 ### From CDN
 
-A pre-bundled script that contains all APIs needed to use FAST Foundation is available on CDN. You can use this script by adding [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) to the script element and then importing from the CDN.
+A pre-bundled script that contains all APIs needed to use Fluent UI Web Components is available on CDN. You can use this script by adding [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) to the script element and then importing from the CDN.
 
 ```html
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script type="module" src="https://unpkg.com/@fluentui/web-components@beta"></script>
+    <script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
   </head>
   <!-- ... -->
 </html>
 ```
 
-The above CDN location points to the latest Beta release of `@fluentui/web-components`. It is advised that when you deploy your site or app, you import the specific version you have developed and tested with.
+The above CDN location points to the latest release of `@fluentui/web-components`. It is advised that when you deploy your site or app, you import the specific version you have developed and tested with.
 
 For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL.
 
 ## Setup
 
+### Required Theming
+
 Fluent UI Web Components are styled using tokens in the form of CSS variables. You can use the `setTheme` utility to provide a theme for your website or application.
 
+Available themes:
+
+- `webLightTheme`
+- `webDarkTheme`
+
+Theme implementation:
+
 ```js
 import { setTheme } from '@fluentui/web-components';
 import { webLightTheme } from '@fluentui/tokens';
@@ -60,31 +69,50 @@ setTheme(webLightTheme);
 
 ## Usage
 
-That's it. You can now use Fluent UI Web Components in your app.
+Each component can be directly imported. The side effect only module will call define and cause it to be set up.
+
+### Defining Components
 
-**Importing the defined component:**
+**Importing a defined component:**
 
 ```js
 import '@fluentui/web-components/button.js';
 ```
 
-**Defining the element yourself using named imports:**
+**Importing all defined components:**
 
 ```js
-import { ButtonDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import '@fluentui/web-components/web-components.js';
+```
+
+### Defining Declarative Components
+
+Each component provides a declarative `f-template`.
+
+Include an `f-template` on your page, you can find it at
+`'@fluentui/web-components/button/template.html'`.
 
-ButtonDefinition.define(FluentDesignSystem.registry);
+**Importing a defined component:**
+
+```js
+import '@fluentui/web-components/button/define-async.js';
 ```
 
-## Developer Experience
+### Hydrating Declarative Components
+
+For more information about including hydratable syntax, we recommend using an integration with [WebUI Framework](https://microsoft.github.io/webui/) project.
+
+[More information about FAST hydration](https://fast.design/docs/3.x/declarative-templates/server-rendering/).
 
-For convenience we have included a [CEM (custom elements manifest)](https://github.com/webcomponents/custom-elements-manifest) at the root of the project.
+### Custom Elements Manifest
+
+We ship a [CEM (custom elements manifest)](https://github.com/webcomponents/custom-elements-manifest) from the root of the bundle.
 
 ```js
-import CEM from '@fluentui/custom-elements.json' with { type: 'json' };
+import CEM from '@fluentui/web-components/custom-elements.json' with { type: 'json' };
 ```
 
-## Development
+## Contributing
 
 To start the component development environment, run `yarn start`.
 
@@ -114,14 +142,7 @@ Use the `yarn check:ssr` summary to avoid clobbering intentional SSR-only edits:
 
 Keep generated-file updates scoped to the component you changed. If `yarn check:ssr` reports unrelated stale files, leave them out of your PR and coordinate a dedicated cleanup.
 
-### Known issue with Storybook site hot-reloading during development
-
-Storybook will watch modules for changes and hot-reload the module when necessary. This is usually great but poses a problem when the module being hot-reloaded defines a custom element. A custom element name can only be defined by the `CustomElementsRegistry` once, so reloading a module that defines a custom element will attempt to re-register the custom element name, throwing an error because the name has already been defined. This error will manifest with the following message:
-`Failed to execute 'define' on 'CustomElementRegistry': the name "my-custom-element-name" has already been used with this registry`
-
-This is a known issue and will indicate that you need to refresh the page. We're working on surfacing a more instructive error message for this case.
-
-## Testing
+### Testing
 
 On CI, a static test harness build is first generated by running Vite in build mode. The Playwright tests are then run against the generated harness. To run Playwright tests in this mode, use the command `yarn nx run web-components:e2e`.
 

diff --git a/packages/web-components/docs/web-components.api.md b/packages/web-components/docs/web-components.api.md
@@ -32,7 +32,7 @@ export class Accordion extends FASTElement {
 }
 
 // @public
-export const accordionDefinition: PartialFASTElementDefinition;
+export const AccordionDefinition: PartialFASTElementDefinition;
 
 // @public
 export const AccordionExpandMode: {
@@ -60,7 +60,7 @@ export interface AccordionItem extends StartEnd {
 }
 
 // @public
-export const accordionItemDefinition: PartialFASTElementDefinition;
+export const AccordionItemDefinition: PartialFASTElementDefinition;
 
 // Warning: (ae-missing-release-tag) "AccordionItemMarkerPosition" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -95,20 +95,20 @@ export type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
 // Warning: (ae-missing-release-tag) "styles" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const accordionItemStyles: ElementStyles;
+export const AccordionItemStyles: ElementStyles;
 
 // @public
-export const accordionItemTemplate: ElementViewTemplate<AccordionItem>;
+export const AccordionItemTemplate: ElementViewTemplate<AccordionItem>;
 
 // Warning: (ae-missing-release-tag) "styles" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const accordionStyles: ElementStyles;
+export const AccordionStyles: ElementStyles;
 
 // Warning: (ae-missing-release-tag) "template" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const accordionTemplate: ElementViewTemplate<Accordion>;
+export const AccordionTemplate: ElementViewTemplate<Accordion>;
 
 // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "AnchorButton" because one of its declarations is marked as @internal

diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
-  "version": "3.0.0-rc.31",
+  "version": "3.0.0",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -45,6 +45,7 @@
     "./utilities.js": "./dist/esm/utils/index.js",
     "./theme/*.js": "./dist/esm/theme/*.js",
     "./*/base.js": "./dist/esm/*/*.base.js",
+    "./*/class.js": "./dist/esm/*/*.js",
     "./*/define.js": "./dist/esm/*/define.js",
     "./*/define-async.js": "./dist/esm/*/define-async.js",
     "./*/definition.js": "./dist/esm/*/*.definition.js",
@@ -119,11 +120,8 @@
   },
   "beachball": {
     "disallowedChangeTypes": [
-      "major",
-      "minor",
-      "patch"
-    ],
-    "tag": "rc"
+      "major"
+    ]
   },
   "customElements": "./custom-elements.json"
 }
diff --git a/packages/web-components/src/_docs/concepts/introduction.mdx b/packages/web-components/src/_docs/concepts/introduction.mdx
@@ -63,10 +63,6 @@ Each component is designed to adhere to the following standards:
 
 Fluent UI Web Components is built directly on the W3C Web Component standards, and does not create its own component model. This allows our components to function the same as built-in, native HTML elements. You do not need a framework to use Fluent UI components but you can use them in combination with any framework or library of your choice.
 
-### When is the official release planned?
-
-While we don't expect any major (breaking) changes in our Release Candidate, we're actively listening to user feedback and responding accordingly. Once partners and the rest of the Fluent project give required approvals, we'll publish the official V3 release.
-
 ### Questions
 
 Reach out to the Fluent UI Web Components team on [Github](https://github.com/microsoft/fluentui)