From f79b63a2d282527ba15cbe8225a7fd0809716fe3 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Mon, 28 Feb 2022 16:17:07 -0800
Subject: [PATCH] docs: use tabs for installation commands

---
 docs/src/pages/index.svelte | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte
index c9be5bcc..b58eb0ff 100644
--- a/docs/src/pages/index.svelte
+++ b/docs/src/pages/index.svelte
@@ -91,18 +91,26 @@
     <Row style="margin-bottom: var(--cds-layout-02)">
       <Column>
         <h3>Installation</h3>
-        <h4>Using Yarn:</h4>
-        <Row noGutter>
-          <CodeSnippet code="{installYarn}" />
-        </Row>
-        <h4>Using NPM:</h4>
-        <Row noGutter>
-          <CodeSnippet code="{installNpm}" />
-        </Row>
-        <h4>Using pnpm:</h4>
-        <Row noGutter>
-          <CodeSnippet code="{installPnpm}" />
-        </Row>
+      </Column>
+    </Row>
+    <Row style="margin-bottom: var(--cds-layout-02)">
+      <Column noGutter>
+        <Tabs>
+          <Tab label="Yarn" />
+          <Tab label="NPM" />
+          <Tab label="pnpm" />
+          <div slot="content" style="margin: 1rem -1rem">
+            <TabContent>
+              <CodeSnippet code="{installYarn}" />
+            </TabContent>
+            <TabContent>
+              <CodeSnippet code="{installNpm}" />
+            </TabContent>
+            <TabContent>
+              <CodeSnippet code="{installPnpm}" />
+            </TabContent>
+          </div>
+        </Tabs>
       </Column>
     </Row>
     <Row style="margin-bottom: var(--cds-layout-04)">