update list layout

Author: arpxspace

docs/recipes/ui/add-shadcn.md

@@ -4,17 +4,16 @@ Integrating Feliz.Shadcn into your SAFE Stack application is straightforward. Th
 
 We will be using the [Feliz.Shadcn](https://github.com/reaptor/feliz.shadcn) wrapper written by [reaptor](https://github.com/reaptor)
 
-1. Setup Tailwind
+#### 1. Setup Tailwind
+> Note: When you use the SAFE template you will already have Tailwind installed by default. You can skip this step.
 
-> Note: When you use the SAFE template you will already have Tailwind installed by default. You can skip this step. 
+Check out the following recipe here to install Tailwind: [Add Tailwind](https://safe-stack.github.io/docs/recipes/ui/add-tailwind/)
 
-Check out the following recipe here to install tailwind: [Add Tailwind](https://safe-stack.github.io/docs/recipes/ui/add-tailwind/)
+#### 2. Move `package.json` & `package-lock.json` to `/src/Client`
 
-1. Move `package.json` & `package-lock.json` to /src/Client
+#### 3. Configure import alias in tsconfig:
 
-1. Configure import alias in tsconfig:
-
-Create a file named tsconfig.json in `/src/Client` and add the following:
+Create a file named `tsconfig.json` in `/src/Client` and add the following:
 
 ```json
 {
@@ -30,7 +29,23 @@ Create a file named tsconfig.json in `/src/Client` and add the following:
 }
 ```
 
-1. Install shadcn/ui
+#### 4. Update the `vite.config.mts` within `/src/Client`
+
+Add the `resolve` property below under the `defineConfig`
+
+```
+export default defineConfig({
+    ...
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname),
+        },
+    },
+    ...
+});
+```
+
+#### 5. Install shadcn/ui
 
 > Note: ensure your node version is > 20.5.0
 
@@ -40,34 +55,34 @@ npx shadcn@latest init
 
 You will be asked a few questions to configure components.json
 
-1.  Add Feliz.Shadcn
+#### 6. Add Feliz.Shadcn
 
 Inside the `/src/Client` directory run:
 
 ```
 dotnet add package Feliz.Shadcn
 ```
 
-1. Start adding any shadcn component
+#### 7. Start adding any shadcn component
 
 Specify first which components you want to use.
 You can find the list of available components [here](https://reaptor.github.io/Feliz.Shadcn/):
 
 ```
-npx shadcn@latest add button 
+npx shadcn@latest add button
 ```
 
-1. Then use it in Feliz:
+#### 8. Use it in Feliz:
 
 ```fsharp
 open Feliz.Shadcn
 
 
-let view = 
+let view =
     Shadcn.button [
         prop.text "Button" ]
 
 ```
 
 Congratulations, now you can use shadcn components!
-Documentation can be found at [https://reaptor.github.io/Feliz.Shadcn/](https://reaptor.github.io/Feliz.Shadcn/)
+Further documentation can be found at [https://reaptor.github.io/Feliz.Shadcn/](https://reaptor.github.io/Feliz.Shadcn/)