docs(www): add radix-ui deps install (shadcn-ui#827)

suleymanbariseser · Jul 25, 2023 · 6478682 · 6478682
1 parent 313d79a
commit 6478682
Show file tree

Hide file tree

Showing 29 changed files with 177 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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" />