Merge pull request #679 from qwikifiers/pr-cli-docs

added more cli instructions and color to links

Author: shairez

apps/website/src/components/mdx-components/index.tsx

@@ -19,6 +19,13 @@ export const components: Record<string, any> = {
       </p>
     );
   }),
+  a: component$<PropsOf<'a'>>(({ ...props }) => {
+    return (
+      <a {...props} class={[cn('text-primary', props.class)]}>
+        <Slot />
+      </a>
+    );
+  }),
   h1: component$<PropsOf<'h1'>>(({ ...props }) => {
     return (
       <h1

apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx

@@ -4,14 +4,30 @@ title: 'Qwik UI | Styled Kit - Installation'
 
 # Using the Styled Kit
 
-## CLI
-
-## Step 0: Skip everthing below, just use the cli 🚀
+## Skip the manual steps and just use the cli 🚀
 
 Simply run the following command:
 
 ```zsh
-npx qwik-ui init
+pnpm dlx qwik-ui init
+```
+
+(or "**npx qwik-ui init**" if you prefer npm)
+
+This will help you install tailwind, create a `qwik-ui.config.json` file and modify your root/global css and tailwind config files with the necessary Qwik UI design system variables and values ([see below](#manual-installation))
+
+### Generating components using the CLI
+
+When you want to add a component you can run:
+
+```zsh
+pnpm qwik-ui add
+```
+
+Or if you know a specific component you want to add, let's say "`input`", you can run:
+
+```zsh
+pnpm qwik-ui add input
 ```
 
 ## Manual installation