chore(dev-hub) Replace nextra Tabs component to fuma docs Tabs component

aditya520 · aditya520 · commit 0f42afca6fb3 · 2025-10-15T14:25:32.000+05:30
diff --git a/apps/developer-hub/content/docs/price-feeds/create-tradingview-charts.mdx b/apps/developer-hub/content/docs/price-feeds/create-tradingview-charts.mdx
@@ -4,7 +4,7 @@ description: "Integrate TradingView charts with Pyth price data using widgets or
 icon: "chart-bar"
 ---
 
-import { Tab, Tabs } from "nextra-theme-docs";
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 
 # How to Create TradingView Charts
 
@@ -35,7 +35,7 @@ When deciding between the two, consider the user experience you want to provide,
 1. Add the following script(s) from [TradingView](https://www.tradingview.com/widget/advanced-chart/) to your website depending on your framework:
 
 <Tabs items={['html', 'jsx']}>
-    <Tab>
+    <Tab value="html">
         ```html copy
         <!-- TradingView Widget BEGIN -->
         <div class="tradingview-widget-container">
@@ -63,7 +63,7 @@ When deciding between the two, consider the user experience you want to provide,
         <!-- TradingView Widget END -->
         ```
     </Tab>
-    <Tab>
+    <Tab value="jsx">
         ```jsx copy
         // TradingViewWidget.jsx
 
diff --git a/apps/developer-hub/content/docs/price-feeds/derive-cross-rate.mdx b/apps/developer-hub/content/docs/price-feeds/derive-cross-rate.mdx
@@ -4,15 +4,16 @@ description: "Learn how to combine two price feeds to create synthetic cross rat
 icon: "arrows-cross"
 ---
 
-import { Callout, Tabs } from "nextra/components";
+import { Callout } from "nextra/components";
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 
 # Derive Cross Rate
 
 This guide shows how to combine two price feeds to derive a cross rate. These are also known as "synthetic" price feeds.
 Cross rates or Synthetic Price feeds are useful for trading pairs that are not directly supported by Pyth.
 
 <Tabs items={["EVM", "SVM"]}>
-<Tabs.Tab>
+<Tab value="EVM">
 ### EVM
 
 For example, if you want to trade the price of **`ETH/EUR{:jsx}`**, which is not directly supported by Pyth, you can combine the price of **`ETH/USD{:jsx}`** and **`EUR/USD{:jsx}`** to derive the price of **`ETH/EUR{:jsx}`**.
@@ -103,9 +104,9 @@ The [How to use real-time data in EVM contracts](./use-real-time-data/evm) guide
 
 The [Price Feed IDs](./price-feeds.mdx) page lists the price feed IDs for each asset supported by Pyth.
 
-</Tabs.Tab>
+</Tab>
 
-<Tabs.Tab>
+<Tab value="SVM">
 ### SVM
 
 The Pyth Rust SDK provides [`get_price_in_quote`](https://github.com/pyth-network/pyth-sdk-rs/blob/d6598dcf8b556cd97bb597661cdc012398371be1/pyth-sdk/src/price.rs#L90) function to combine two price feeds.
@@ -121,6 +122,6 @@ let btc_eth: Price = btc_usd.get_price_in_quote(&eth_usd, -8);
 println!("BTC/ETH price: ({} +- {}) x 10^{}", price.price, price.conf, price.expo);
 ```
 
-</Tabs.Tab>
+</Tab>
 
 </Tabs>
diff --git a/apps/developer-hub/content/docs/price-feeds/use-real-time-data/pull-integration/fuel.mdx b/apps/developer-hub/content/docs/price-feeds/use-real-time-data/pull-integration/fuel.mdx
@@ -4,7 +4,8 @@ description: "Consume Pyth Network prices in Fuel applications using smart contr
 icon: "Fire"
 ---
 
-import { Callout, Tabs } from "nextra/components";
+import { Callout } from "nextra/components";
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 
 # How to Use Real-Time Data in Fuel Contracts
 
@@ -22,8 +23,8 @@ pyth_interface = { git = "https://github.com/pyth-network/pyth-crosschain", tag
 Pyth also provides a javascript SDK to interact with the Pyth contract on Fuel. You can install it using the following command:
 
 <Tabs items={["npm", "yarn"]}>
-  <Tabs.Tab>```npm install --save @pythnetwork/pyth-fuel-js ```</Tabs.Tab>
-  <Tabs.Tab>```yarn add @pythnetwork/pyth-fuel-js ```</Tabs.Tab>
+  <Tab value="npm">```npm install --save @pythnetwork/pyth-fuel-js ```</Tab>
+  <Tab value="yarn">```yarn add @pythnetwork/pyth-fuel-js ```</Tab>
 </Tabs>
 
 ## Write Contract Code
diff --git a/apps/developer-hub/content/docs/price-feeds/use-real-time-data/pull-integration/iota.mdx b/apps/developer-hub/content/docs/price-feeds/use-real-time-data/pull-integration/iota.mdx
@@ -4,7 +4,8 @@ description: "Consume Pyth Network prices in IOTA applications using smart contr
 icon: "Circle"
 ---
 
-import { Callout, Tabs } from "nextra/components";
+import { Callout } from "nextra/components";
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 
 # How to Use Real-Time Data in IOTA Contracts
 
@@ -15,7 +16,7 @@ This guide explains how to use real-time Pyth data in IOTA applications.
 Use the following dependency in your `Move.toml` file to use the latest Pyth IOTA package and its dependencies:
 
 <Tabs items={['IOTA Testnet', 'IOTA Mainnet']}>
-<Tabs.Tab>
+<Tab value="IOTA Testnet">
 
 ```sh copy
 [dependencies.Pyth]
@@ -34,8 +35,8 @@ subdir = "crates/iota-framework/packages/iota-framework"
 rev = "751c23caf24efd071463b9ffd07eabcb15f44f31"
 ```
 
-</Tabs.Tab>
-<Tabs.Tab>
+</Tab>
+<Tab value="IOTA Mainnet">
 
 ```sh copy
 [dependencies.Pyth]
@@ -54,13 +55,13 @@ subdir = "crates/iota-framework/packages/iota-framework"
 rev = "751c23caf24efd071463b9ffd07eabcb15f44f31"
 ```
 
-</Tabs.Tab>
+</Tab>
 </Tabs>
 
 Pyth also provides a javascript SDK to construct transaction blocks that update price feeds:
 
 <Tabs items={["IOTA"]}>
-  <Tabs.Tab>
+  <Tab value="IOTA">
     ```sh
     # NPM
     npm install --save @pythnetwork/pyth-iota-js
@@ -69,7 +70,7 @@ Pyth also provides a javascript SDK to construct transaction blocks that update
     yarn add @pythnetwork/pyth-iota-js
     ```
 
-  </Tabs.Tab>
+  </Tab>
 </Tabs>
 
 ## Write Contract Code
diff --git a/apps/developer-hub/content/docs/price-feeds/use-real-time-data/pull-integration/starknet.mdx b/apps/developer-hub/content/docs/price-feeds/use-real-time-data/pull-integration/starknet.mdx
@@ -4,7 +4,8 @@ description: "Consume Pyth Network prices in Starknet applications using Cairo s
 icon: "Star"
 ---
 
-import { Callout, Tabs } from "nextra/components";
+import { Callout } from "nextra/components";
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 
 # How to Use Real-Time Data in Starknet Contracts
 
@@ -22,20 +23,20 @@ pyth = { git = "https://github.com/pyth-network/pyth-crosschain.git", tag = "pyt
 Pyth also provides a javascript SDK to interact with the Pyth contract on Starknet. You can install it using the following command:
 
 <Tabs items={["npm", "yarn"]}>
-  <Tabs.Tab>
+  <Tab value="npm">
 
 ```sh copy
 npm install --save @pythnetwork/pyth-starknet-js
 ```
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </Tab>
+  <Tab value="yarn">
 
 ```sh copy
 yarn add @pythnetwork/pyth-starknet-js
 ```
 
-  </Tabs.Tab>
+  </Tab>
 </Tabs>
 
 ## Write Contract Code
diff --git a/apps/developer-hub/content/docs/price-feeds/use-real-time-data/pull-integration/sui.mdx b/apps/developer-hub/content/docs/price-feeds/use-real-time-data/pull-integration/sui.mdx
@@ -4,7 +4,8 @@ description: "Integrate Pyth Network real-time price data in Sui Move contracts
 icon: "Drop"
 ---
 
-import { Callout, Tabs } from "nextra/components";
+import { Callout } from "nextra/components";
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 
 # How to Use Real-Time Data in Sui Contracts
 
@@ -15,7 +16,7 @@ This guide explains how to use real-time Pyth data in Sui applications.
 Use the following dependency in your `Move.toml` file to use the latest Pyth Sui package and its dependencies:
 
 <Tabs items={['Sui Mainnet', 'Sui Testnet']}>
-<Tabs.Tab>
+<Tab value="Sui Mainnet">
 ```sh copy
 [dependencies.Pyth]
 git = "https://github.com/pyth-network/pyth-crosschain.git"
@@ -35,8 +36,8 @@ subdir = "crates/sui-framework/packages/sui-framework"
 rev = "041c5f2bae2fe52079e44b70514333532d69f4e6"
 
 ````
-</Tabs.Tab>
-  <Tabs.Tab>
+</Tab>
+  <Tab value="Sui Testnet">
 ```sh copy
 [dependencies.Pyth]
 git = "https://github.com/pyth-network/pyth-crosschain.git"
@@ -55,13 +56,13 @@ subdir = "crates/sui-framework/packages/sui-framework"
 rev = "041c5f2bae2fe52079e44b70514333532d69f4e6"
 ````
 
-</Tabs.Tab>
+</Tab>
 </Tabs>
 
 Pyth also provides a javascript SDK to construct transaction blocks that update price feeds:
 
 <Tabs items={["Sui"]}>
-  <Tabs.Tab>
+  <Tab value="Sui">
     ```sh
     # NPM
     npm install --save @pythnetwork/pyth-sui-js
@@ -70,7 +71,7 @@ Pyth also provides a javascript SDK to construct transaction blocks that update
     yarn add @pythnetwork/pyth-sui-js
     ```
 
-  </Tabs.Tab>
+  </Tab>
 </Tabs>
 
 ## Write Contract Code
diff --git a/apps/developer-hub/content/docs/price-feeds/use-real-time-data/pull-integration/ton.mdx b/apps/developer-hub/content/docs/price-feeds/use-real-time-data/pull-integration/ton.mdx
@@ -4,7 +4,7 @@ description: "Consume Pyth Network prices in TON applications using smart contra
 icon: "Diamond"
 ---
 
-import { Tabs } from "nextra/components";
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 
 # How to Use Real-Time Data in TON Contracts
 
@@ -15,20 +15,20 @@ This guide explains how to use real-time Pyth data in TON applications.
 Install the Pyth TON SDK and other necessary dependencies using npm:
 
 <Tabs items={["npm", "yarn"]}>
-  <Tabs.Tab>
+  <Tab value="npm">
 
 ```sh copy
 npm install @pythnetwork/pyth-ton-js @pythnetwork/hermes-client @ton/core @ton/ton @ton/crypto
 ```
 
-  </Tabs.Tab>
-  <Tabs.Tab>
+  </Tab>
+  <Tab value="yarn">
 
 ```sh copy
 yarn add @pythnetwork/pyth-ton-js @pythnetwork/hermes-client @ton/core @ton/ton @ton/crypto
 ```
 
-  </Tabs.Tab>
+  </Tab>
 </Tabs>
 
 ## Write Contract Code
