From b4dda36cc928995a49099aa2e153d7a976d43f4b Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Tue, 4 Jul 2023 12:01:50 +0400
Subject: [PATCH] docs(www): add radix-ui deps install (#827)

---
 apps/www/content/docs/components/accordion.mdx       |  6 ++++++
 apps/www/content/docs/components/alert-dialog.mdx    |  6 ++++++
 apps/www/content/docs/components/aspect-ratio.mdx    |  6 ++++++
 apps/www/content/docs/components/avatar.mdx          |  6 ++++++
 apps/www/content/docs/components/button.mdx          |  6 ++++++
 apps/www/content/docs/components/calendar.mdx        | 10 ++++++++++
 apps/www/content/docs/components/checkbox.mdx        |  6 ++++++
 apps/www/content/docs/components/collapsible.mdx     |  6 ++++++
 apps/www/content/docs/components/command.mdx         |  6 ++++++
 apps/www/content/docs/components/context-menu.mdx    |  6 ++++++
 apps/www/content/docs/components/dialog.mdx          |  6 ++++++
 apps/www/content/docs/components/dropdown-menu.mdx   |  6 ++++++
 apps/www/content/docs/components/hover-card.mdx      |  6 ++++++
 apps/www/content/docs/components/label.mdx           |  6 ++++++
 apps/www/content/docs/components/menubar.mdx         |  6 ++++++
 apps/www/content/docs/components/navigation-menu.mdx |  6 ++++++
 apps/www/content/docs/components/popover.mdx         |  6 ++++++
 apps/www/content/docs/components/progress.mdx        |  6 ++++++
 apps/www/content/docs/components/radio-group.mdx     |  6 ++++++
 apps/www/content/docs/components/scroll-area.mdx     |  6 ++++++
 apps/www/content/docs/components/select.mdx          |  6 ++++++
 apps/www/content/docs/components/separator.mdx       |  5 +++++
 apps/www/content/docs/components/sheet.mdx           |  6 ++++++
 apps/www/content/docs/components/slider.mdx          |  6 ++++++
 apps/www/content/docs/components/switch.mdx          |  6 ++++++
 apps/www/content/docs/components/tabs.mdx            |  6 ++++++
 apps/www/content/docs/components/toast.mdx           |  6 ++++++
 apps/www/content/docs/components/toggle.mdx          |  6 ++++++
 apps/www/content/docs/components/tooltip.mdx         |  6 ++++++
 29 files changed, 177 insertions(+)

diff --git a/apps/www/content/docs/components/accordion.mdx b/apps/www/content/docs/components/accordion.mdx
index 3542dfbe5a..41ca737ee8 100644
--- a/apps/www/content/docs/components/accordion.mdx
+++ b/apps/www/content/docs/components/accordion.mdx
@@ -67,6 +67,12 @@ module.exports = {
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-accordion
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="accordion" />
diff --git a/apps/www/content/docs/components/alert-dialog.mdx b/apps/www/content/docs/components/alert-dialog.mdx
index eb191ff687..443969623a 100644
--- a/apps/www/content/docs/components/alert-dialog.mdx
+++ b/apps/www/content/docs/components/alert-dialog.mdx
@@ -30,6 +30,12 @@ npx shadcn-ui@latest add alert-dialog
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-alert-dialog
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="alert-dialog" />
diff --git a/apps/www/content/docs/components/aspect-ratio.mdx b/apps/www/content/docs/components/aspect-ratio.mdx
index 773238adfc..9984b58e5f 100644
--- a/apps/www/content/docs/components/aspect-ratio.mdx
+++ b/apps/www/content/docs/components/aspect-ratio.mdx
@@ -29,6 +29,12 @@ npx shadcn-ui@latest add aspect-ratio
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-aspect-ratio
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="aspect-ratio" />
diff --git a/apps/www/content/docs/components/avatar.mdx b/apps/www/content/docs/components/avatar.mdx
index 5eec3019c1..defd9ddc96 100644
--- a/apps/www/content/docs/components/avatar.mdx
+++ b/apps/www/content/docs/components/avatar.mdx
@@ -29,6 +29,12 @@ npx shadcn-ui@latest add avatar
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-avatar
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="avatar" />
diff --git a/apps/www/content/docs/components/button.mdx b/apps/www/content/docs/components/button.mdx
index d61ac4c168..1a80d206f0 100644
--- a/apps/www/content/docs/components/button.mdx
+++ b/apps/www/content/docs/components/button.mdx
@@ -27,6 +27,12 @@ npx shadcn-ui@latest add button
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-slot
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="button" />
diff --git a/apps/www/content/docs/components/calendar.mdx b/apps/www/content/docs/components/calendar.mdx
index 146c5caab9..f276a9d551 100644
--- a/apps/www/content/docs/components/calendar.mdx
+++ b/apps/www/content/docs/components/calendar.mdx
@@ -30,6 +30,16 @@ npx shadcn-ui@latest add calendar
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install react-day-picker date-fns
+```
+
+<Step>Add the `Button` component to your project.</Step>
+
+The `Calendar` component uses the `Button` component. Make sure you have it installed in your project.
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="calendar" />
diff --git a/apps/www/content/docs/components/checkbox.mdx b/apps/www/content/docs/components/checkbox.mdx
index da8f30a75f..e8be109eac 100644
--- a/apps/www/content/docs/components/checkbox.mdx
+++ b/apps/www/content/docs/components/checkbox.mdx
@@ -29,6 +29,12 @@ npx shadcn-ui@latest add checkbox
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-checkbox
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="checkbox" />
diff --git a/apps/www/content/docs/components/collapsible.mdx b/apps/www/content/docs/components/collapsible.mdx
index 2e9ce76e81..f95fb03f5e 100644
--- a/apps/www/content/docs/components/collapsible.mdx
+++ b/apps/www/content/docs/components/collapsible.mdx
@@ -30,6 +30,12 @@ npx shadcn-ui@latest add collapsible
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-collapsible
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="collapsible" />
diff --git a/apps/www/content/docs/components/command.mdx b/apps/www/content/docs/components/command.mdx
index 6ca274186b..536ee713b9 100644
--- a/apps/www/content/docs/components/command.mdx
+++ b/apps/www/content/docs/components/command.mdx
@@ -34,6 +34,12 @@ npx shadcn-ui@latest add command
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install cmdk
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="command" />
diff --git a/apps/www/content/docs/components/context-menu.mdx b/apps/www/content/docs/components/context-menu.mdx
index ef2bb995f6..d0097638f3 100644
--- a/apps/www/content/docs/components/context-menu.mdx
+++ b/apps/www/content/docs/components/context-menu.mdx
@@ -29,6 +29,12 @@ npx shadcn-ui@latest add context-menu
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-context-menu
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="context-menu" />
diff --git a/apps/www/content/docs/components/dialog.mdx b/apps/www/content/docs/components/dialog.mdx
index 1f35039431..d617754e50 100644
--- a/apps/www/content/docs/components/dialog.mdx
+++ b/apps/www/content/docs/components/dialog.mdx
@@ -30,6 +30,12 @@ npx shadcn-ui@latest add dialog
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-dialog
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="dialog" />
diff --git a/apps/www/content/docs/components/dropdown-menu.mdx b/apps/www/content/docs/components/dropdown-menu.mdx
index ff8730d196..6f16fb961a 100644
--- a/apps/www/content/docs/components/dropdown-menu.mdx
+++ b/apps/www/content/docs/components/dropdown-menu.mdx
@@ -30,6 +30,12 @@ npx shadcn-ui@latest add dropdown-menu
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-dropdown-menu
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="dropdown-menu" />
diff --git a/apps/www/content/docs/components/hover-card.mdx b/apps/www/content/docs/components/hover-card.mdx
index 0273ec8bf7..974e9ef692 100644
--- a/apps/www/content/docs/components/hover-card.mdx
+++ b/apps/www/content/docs/components/hover-card.mdx
@@ -27,6 +27,12 @@ npx shadcn-ui@latest add hover-card
 
 <TabsContent value="manual">
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-hover-card
+```
+
 <Steps>
 
 <Step>Copy and paste the following code into your project.</Step>
diff --git a/apps/www/content/docs/components/label.mdx b/apps/www/content/docs/components/label.mdx
index c95d9c779f..1cfaec654f 100644
--- a/apps/www/content/docs/components/label.mdx
+++ b/apps/www/content/docs/components/label.mdx
@@ -29,6 +29,12 @@ npx shadcn-ui@latest add label
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-label
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="label" />
diff --git a/apps/www/content/docs/components/menubar.mdx b/apps/www/content/docs/components/menubar.mdx
index a7625d4a40..3dd554e560 100644
--- a/apps/www/content/docs/components/menubar.mdx
+++ b/apps/www/content/docs/components/menubar.mdx
@@ -29,6 +29,12 @@ npx shadcn-ui@latest add menubar
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-menubar
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="menubar" />
diff --git a/apps/www/content/docs/components/navigation-menu.mdx b/apps/www/content/docs/components/navigation-menu.mdx
index f801077fd6..d65c181354 100644
--- a/apps/www/content/docs/components/navigation-menu.mdx
+++ b/apps/www/content/docs/components/navigation-menu.mdx
@@ -29,6 +29,12 @@ npx shadcn-ui@latest add navigation-menu
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-navigation-menu
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="navigation-menu" />
diff --git a/apps/www/content/docs/components/popover.mdx b/apps/www/content/docs/components/popover.mdx
index 26cb2649a2..0179f16be0 100644
--- a/apps/www/content/docs/components/popover.mdx
+++ b/apps/www/content/docs/components/popover.mdx
@@ -29,6 +29,12 @@ npx shadcn-ui@latest add popover
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-popover
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="popover" />
diff --git a/apps/www/content/docs/components/progress.mdx b/apps/www/content/docs/components/progress.mdx
index f362f0b811..0274dba2c7 100644
--- a/apps/www/content/docs/components/progress.mdx
+++ b/apps/www/content/docs/components/progress.mdx
@@ -29,6 +29,12 @@ npx shadcn-ui@latest add progress
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-progress
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="progress" />
diff --git a/apps/www/content/docs/components/radio-group.mdx b/apps/www/content/docs/components/radio-group.mdx
index ba1530f4c1..e18d0ddb06 100644
--- a/apps/www/content/docs/components/radio-group.mdx
+++ b/apps/www/content/docs/components/radio-group.mdx
@@ -29,6 +29,12 @@ npx shadcn-ui@latest add radio-group
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-radio-group
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="radio-group" />
diff --git a/apps/www/content/docs/components/scroll-area.mdx b/apps/www/content/docs/components/scroll-area.mdx
index 5120e9e66b..1244e4cc9b 100644
--- a/apps/www/content/docs/components/scroll-area.mdx
+++ b/apps/www/content/docs/components/scroll-area.mdx
@@ -29,6 +29,12 @@ npx shadcn-ui@latest add scroll-area
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-scroll-area
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="scroll-area" />
diff --git a/apps/www/content/docs/components/select.mdx b/apps/www/content/docs/components/select.mdx
index 2ada78957d..d1f7f40e50 100644
--- a/apps/www/content/docs/components/select.mdx
+++ b/apps/www/content/docs/components/select.mdx
@@ -30,6 +30,12 @@ npx shadcn-ui@latest add select
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-select
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="select" />
diff --git a/apps/www/content/docs/components/separator.mdx b/apps/www/content/docs/components/separator.mdx
index 87e7123e60..17ac178f5f 100644
--- a/apps/www/content/docs/components/separator.mdx
+++ b/apps/www/content/docs/components/separator.mdx
@@ -28,6 +28,11 @@ npx shadcn-ui@latest add separator
 <TabsContent value="manual">
 
 <Steps>
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-separator
+```
 
 <Step>Copy and paste the following code into your project.</Step>
 
diff --git a/apps/www/content/docs/components/sheet.mdx b/apps/www/content/docs/components/sheet.mdx
index ccadaca7df..6d6190fd70 100644
--- a/apps/www/content/docs/components/sheet.mdx
+++ b/apps/www/content/docs/components/sheet.mdx
@@ -29,6 +29,12 @@ npx shadcn-ui@latest add sheet
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-dialog
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="sheet" />
diff --git a/apps/www/content/docs/components/slider.mdx b/apps/www/content/docs/components/slider.mdx
index 2900c15b64..02b4a582c3 100644
--- a/apps/www/content/docs/components/slider.mdx
+++ b/apps/www/content/docs/components/slider.mdx
@@ -29,6 +29,12 @@ npx shadcn-ui@latest add slider
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-slider
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="slider" />
diff --git a/apps/www/content/docs/components/switch.mdx b/apps/www/content/docs/components/switch.mdx
index 2bad0bc164..dcae9ffc75 100644
--- a/apps/www/content/docs/components/switch.mdx
+++ b/apps/www/content/docs/components/switch.mdx
@@ -29,6 +29,12 @@ npx shadcn-ui@latest add switch
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-switch
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="switch" />
diff --git a/apps/www/content/docs/components/tabs.mdx b/apps/www/content/docs/components/tabs.mdx
index 8cbaa1e2b5..3f01fbd699 100644
--- a/apps/www/content/docs/components/tabs.mdx
+++ b/apps/www/content/docs/components/tabs.mdx
@@ -29,6 +29,12 @@ npx shadcn-ui@latest add tabs
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-tabs
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="tabs" />
diff --git a/apps/www/content/docs/components/toast.mdx b/apps/www/content/docs/components/toast.mdx
index caa8ef2a07..0ab9999fd7 100644
--- a/apps/www/content/docs/components/toast.mdx
+++ b/apps/www/content/docs/components/toast.mdx
@@ -53,6 +53,12 @@ export default function RootLayout({ children }) {
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-toast
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="toast" />
diff --git a/apps/www/content/docs/components/toggle.mdx b/apps/www/content/docs/components/toggle.mdx
index 5258731eef..793b76b73e 100644
--- a/apps/www/content/docs/components/toggle.mdx
+++ b/apps/www/content/docs/components/toggle.mdx
@@ -29,6 +29,12 @@ npx shadcn-ui@latest add toggle
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-toggle
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="toggle" />
diff --git a/apps/www/content/docs/components/tooltip.mdx b/apps/www/content/docs/components/tooltip.mdx
index bd93d2d74a..358d93b691 100644
--- a/apps/www/content/docs/components/tooltip.mdx
+++ b/apps/www/content/docs/components/tooltip.mdx
@@ -29,6 +29,12 @@ npx shadcn-ui@latest add tooltip
 
 <Steps>
 
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-tooltip
+```
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="tooltip" />