(/quickstarts/remix) Remove unnecessary code from examples; add run p…

…roject instructions (#1546)
clerk · Oct 8, 2024 · 7a565b9 · 7a565b9
1 parent 2c6017c
commit 7a565b9
Showing 1 changed file with 26 additions and 16 deletions.
diff --git 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