From 31077ec7cb865df17ffd7a3cb6fd0636eaaf3c4f Mon Sep 17 00:00:00 2001
From: Ollie Halliday <22655069+Hallidayo@users.noreply.github.com>
Date: Wed, 25 May 2022 15:03:16 +0100
Subject: [PATCH] @reach/visually-hidden install tabs added

---
 web/docs/guides/with-react.mdx | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/web/docs/guides/with-react.mdx b/web/docs/guides/with-react.mdx
index 560bc50d678..b46c3d96821 100644
--- a/web/docs/guides/with-react.mdx
+++ b/web/docs/guides/with-react.mdx
@@ -476,7 +476,29 @@ Every Supabase project is configured with [Storage](/docs/guides/storage) for ma
 
 ### Add @reach/visually-hidden
 
-The upload widget uses one additional npm library. You can install it like so: `npm install @reach/visually-hidden` or `yarn add @reach/visually-hidden`.
+The upload widget uses one additional npm library `@reach/visually-hidden`. You can install it like so:
+
+<Tabs
+defaultValue="NPM"
+values={[
+  {label: 'npm', value: 'NPM'},
+  {label: 'Yarn', value: 'YARN'},
+]}>
+<TabItem value="NPM">
+
+```bash
+npm install @reach/visually-hidden
+```
+
+</TabItem>
+<TabItem value="YARN">
+
+```bash
+yarn add @reach/visually-hidden
+```
+
+</TabItem>
+</Tabs>
 
 ### Create an upload widget