From 6e0d18edf3cb42d9f11d56a576f7dc98318b6769 Mon Sep 17 00:00:00 2001
From: HananINouman <110400366+HananINouman@users.noreply.github.com>
Date: Fri, 28 Jul 2023 08:40:37 +0300
Subject: [PATCH] use tabs for yarn and npm (#235)

---
 .../int/quickstart/advanced/quickstart-sdk.md | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/docs/int/quickstart/advanced/quickstart-sdk.md b/docs/int/quickstart/advanced/quickstart-sdk.md
index dc1fe707c6..8248011373 100644
--- a/docs/int/quickstart/advanced/quickstart-sdk.md
+++ b/docs/int/quickstart/advanced/quickstart-sdk.md
@@ -3,6 +3,9 @@ sidebar_position: 1
 description: Create a DV cluster using the Obol Typescript SDK
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # Create a DV using the SDK
 
 :::caution
@@ -20,13 +23,18 @@ This is a walkthrough of using the [Obol-SDK](https://www.npmjs.com/package/@obo
 
 Install the Obol-SDK package into your development environment
 
-```bash
-# NPM
-npm install --save @obolnetwork/obol-sdk
-
-# Yarn
-yarn add @obolnetwork/obol-sdk
-```
+<Tabs groupId="install-sdk">
+  <TabItem value="npm" label="NPM" default>
+    <pre>
+      <code>npm install --save @obolnetwork/obol-sdk</code>
+    </pre>
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+    <pre>
+      <code>yarn add @obolnetwork/obol-sdk</code>
+    </pre>
+  </TabItem>
+</Tabs>
 
 ## Instantiate the client