diff --git a/src/content/docs/guides/framework-integrations/react.mdx b/src/content/docs/guides/framework-integrations/react.mdx
index de57712..b64bfe8 100644
--- a/src/content/docs/guides/framework-integrations/react.mdx
+++ b/src/content/docs/guides/framework-integrations/react.mdx
@@ -2,65 +2,63 @@
 title: React
 ---
 
-## React 18 and older
+## React 19 and above
 
-In React 18 and earlier, custom elements were not fully supported. Properties and custom events
-had to be added imperatively using the useEffect hook. To simplify this process, a separate package
-was created, providing wrapper components based on the [@lit/react](https://lit.dev/docs/frameworks/react/) package. To integrate these
-wrapper components into your React app, install the package via npm:
-
-```bash
-npm i @vscode-elements/react-elements
-```
+From React 19, web components are fully supported. If you use custom tag names, you must configure
+the TypeScript parser to recognize the custom elements. An [example TypeScript definition](https://github.com/vscode-elements/examples/blob/react-vite/react-vite/src/global.d.ts) is 
+available in the examples repository. To ensure proper functionality, keep the following rules in mind:
 
-### Using the components
+- Props are treated as properties if they exist on the element instance; otherwise, they are assigned as attributes.
+- Unlike native HTML elements, use the `class` and `for` props instead of `className` and `htmlFor`.  
+- Custom events are prefixed with `on` without further modification. For example, the `vsc-split-layout-change` event becomes `onvsc-split-layout-change`.
 
-Wrapper component names follow the PascalCase convention, derived from the tag names of
-the corresponding web components.
+### Example
 
 ```typescript
-import { VscodeSplitLayout } from "@vscode-elements/react-elements";
+import "@vscode-elements/elements/dist/vscode-split-layout";
 
 export default function MyComponent() {
   return (
     <div>
-      <VscodeSplitLayout
+      <vscode-split-layout
         initialHandlePosition="50%"
-        onVscSplitLayoutChange={(event) => {
+        onvsc-split-layout-change={(event) => {
           console.log(event);
         }}
-      ></VscodeSplitLayout>
+      ></vscode-split-layout>
     </div>
   );
 }
 ```
 
-For more examples, please visit the [project repository](https://github.com/vscode-elements/react-elements/tree/main/packages/demo).
+## React 18 and older
 
-## Recent React version
+In React 18 and earlier, custom elements were not fully supported. Properties and custom events
+had to be added imperatively using the useEffect hook. To simplify this process, a separate package
+was created, providing wrapper components based on the [@lit/react](https://lit.dev/docs/frameworks/react/) package. To integrate these
+wrapper components into your React app, install the package via npm:
 
-From React 19, web components are fully supported. If you use custom tag names, you must configure
-the TypeScript parser to recognize the custom elements. An [example TypeScript definition](https://github.com/vscode-elements/examples/blob/react-vite/react-vite/src/global.d.ts) is 
-available in the examples repository. To ensure proper functionality, keep the following rules in mind:
+```bash
+npm i @vscode-elements/react-elements
+```
 
-- Props are treated as properties if they exist on the element instance; otherwise, they are assigned as attributes.
-- Unlike native HTML elements, use the `class` and `for` props instead of `className` and `htmlFor`.  
-- Custom events are prefixed with `on` without further modification. For example, the `vsc-split-layout-change` event becomes `onvsc-split-layout-change`.
+### Using the components
 
-### Example
+Wrapper component names follow the PascalCase convention, derived from the tag names of
+the corresponding web components.
 
 ```typescript
-import "@vscode-elements/elements/dist/vscode-split-layout";
+import { VscodeSplitLayout } from "@vscode-elements/react-elements";
 
 export default function MyComponent() {
   return (
     <div>
-      <vscode-split-layout
+      <VscodeSplitLayout
         initialHandlePosition="50%"
-        onvsc-split-layout-change={(event) => {
+        onVscSplitLayoutChange={(event) => {
           console.log(event);
         }}
-      ></vscode-split-layout>
+      ></VscodeSplitLayout>
     </div>
   );
 }
@@ -99,3 +97,5 @@ function App() {
 
 export default App;
 ```
+
+For more examples, please visit the [project repository](https://github.com/vscode-elements/react-elements/tree/main/packages/demo).