From be5ede6b3641dd80b395817999f4a671bf27b8f6 Mon Sep 17 00:00:00 2001
From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com>
Date: Tue, 17 Sep 2024 12:56:02 -0400
Subject: [PATCH] Update Remix quickstart

---
 docs/quickstarts/remix.mdx | 42 +++++++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/docs/quickstarts/remix.mdx b/docs/quickstarts/remix.mdx
index 31aa00fec3..48960ca2c3 100644
--- a/docs/quickstarts/remix.mdx
+++ b/docs/quickstarts/remix.mdx
@@ -196,8 +196,8 @@ Learn how to use Clerk to quickly and easily add secure authentication and user
   - [`<SignedIn>`](/docs/components/control/signed-in): Children of this component can only be seen while **signed in**.
   - [`<SignedOut>`](/docs/components/control/signed-out): Children of this component can only be seen while **signed out**.
   - [`<UserButton />`](/docs/components/user/user-button): A prebuilt component that comes styled out of the box to show the avatar from the account the user is signed in with.
-  - [`<SignInButton />`](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. For this example, it links to the [Account Portal sign-in page.](/docs/customization/account-portal/overview)
-  - [`<SignUpButton />`](/docs/components/unstyled/sign-up-button): An unstyled component that links to the sign-up page or displays the sign-up modal, depending on which `mode` you have set. For this example, it links to the [Account Portal sign-up page.](/docs/customization/account-portal/overview)
+  - [`<SignInButton />`](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page. For this example, because you have not specified any props or [environment variables](/docs/deployments/clerk-environment-variables) for the sign-in URL, the component will link to [Clerk's Account Portal sign-in page.](/docs/customization/account-portal/overview#sign-in)
+  - [`<SignUpButton />`](/docs/components/unstyled/sign-up-button): An unstyled component that links to the sign-up page. For this example, because you have not specified any props or [environment variables](/docs/deployments/clerk-environment-variables) for the sign-in URL, the component will link to [Clerk's Account Portal sign-up page.](/docs/customization/account-portal/overview#sign-up)
 
   ```tsx {{ filename: 'routes/_index.tsx' }}
   import {
@@ -215,22 +215,16 @@ Learn how to use Clerk to quickly and easily add secure authentication and user
         <h1>Index Route</h1>
         <SignedIn>
           <p>You are signed in!</p>
-          <div>
-            <p>View your profile here</p>
-            <UserButton />
-          </div>
-          <div>
-            <SignOutButton />
-          </div>
+          <UserButton />
+
+          <SignOutButton />
         </SignedIn>
         <SignedOut>
           <p>You are signed out</p>
-          <div>
-            <SignInButton />
-          </div>
-          <div>
-            <SignUpButton />
-          </div>
+
+          <SignInButton />
+
+          <SignUpButton />
         </SignedOut>
       </div>
     )
@@ -267,7 +261,23 @@ Learn how to use Clerk to quickly and easily add secure authentication and user
 
   ### Create your first user
 
-  Now visit your app's homepage at [`http://localhost:5173`](http://localhost:5173). Sign up to create your first user.
+  Run your project with the following command:
+
+  <CodeBlockTabs options={["npm", "yarn", "pnpm"]}>
+    ```bash {{ filename: 'terminal' }}
+    npm run dev
+    ```
+
+    ```bash {{ filename: 'terminal' }}
+    yarn dev
+    ```
+
+    ```bash {{ filename: 'terminal' }}
+    pnpm dev
+    ```
+  </CodeBlockTabs>
+
+  Visit your app's homepage at [`http://localhost:5173`](http://localhost:5173). Sign up to create your first user.
 </Steps>
 
 ## Next steps