From d8cc5f0ac94479ab268f70a7ca36d08681469406 Mon Sep 17 00:00:00 2001
From: afiqzudinhadi <afiqzudinhadi@gmail.com>
Date: Sun, 22 Jun 2025 20:44:04 +0800
Subject: [PATCH] docs: update root readme and add readme @repo/ui

---
 README.md             |  9 ---------
 packages/ui/README.md | 43 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 9 deletions(-)
 create mode 100644 packages/ui/README.md

diff --git a/README.md b/README.md
index bd25de7..77951b4 100644
--- a/README.md
+++ b/README.md
@@ -21,12 +21,6 @@ This Turborepo includes the following packages and apps:
 - `@repo/ui`: shared UI components for frontend use.
     - A dummy React UI library (which contains `<CounterButton>` and `<Link>` components)
     - And shadcn/ui components (which contains `<Button>` and `<Card>` components)
-    - Building the UI will require exporting the components in the `package.json` file.
-        - For `Vite` apps, `vite-tsconfig-paths` package is required to ensure the UI components are properly built and available for use.
-        - For `Next.js` apps, the `next.config.ts` file needs to have `transpilePackages: ["@repo/ui"]` to ensure the UI components are properly built and available for use.
-    - Although not required, adding `	"paths": {
-	"@repo/ui/*": ["../../packages/ui/src/*"]
-}` in the `tsconfig.json` file of each app can help with TypeScript path resolution during development.
 
 Each package and app is 100% [TypeScript](https://www.typescriptlang.org/).
 
@@ -39,7 +33,4 @@ This Turborepo has some additional tools already setup for you:
 - [Jest](https://jestjs.io) test runner for all things JavaScript
 - [Prettier](https://prettier.io) for code formatting
 - [shadcn/ui](https://ui.shadcn.com/docs/monorepo) for UI components
-    - To use the CLI, run `npx shadcn@latest add <component-name>` in the `@repo/ui` package directory.
-    - It can also be run at each app directory and the CLI will automatically add it to the shared `@repo/ui` package but each app will need its own `components.json` file.
 - [Tailwind CSS v4](https://tailwindcss.com/) for styling and to use shadcn/ui
-    - Each app needs its own tailwind.config.js file and postcss.config.js file but they all extend from the shared `@repo/ui/tailwind.config.js` and `@repo/ui/postcss.config.js` files.
diff --git a/packages/ui/README.md b/packages/ui/README.md
new file mode 100644
index 0000000..5e073f0
--- /dev/null
+++ b/packages/ui/README.md
@@ -0,0 +1,43 @@
+# @repo/ui
+
+Shared UI components for frontend use. This package has already been set up with dummy **React UI library** (`<CounterButton>` and `<Link>` components) and **shadcn/ui** components (`<Button>` and `<Card>`).
+
+## What's inside?
+
+This repo includes the following packages and apps:
+
+### Apps and Packages
+
+- `tailwindcss`: Tailwind CSS configuration for styling
+- `postcss`: PostCSS configuration for processing CSS
+- `shadcn/ui`: shadcn/ui components for UI
+
+### Building and Running
+
+Building the UI will require exporting the components in the `package.json` file.
+
+For `Vite` apps, `vite-tsconfig-paths` package is required to ensure the UI components are properly built and available for use.
+
+For `Next.js` apps, the `next.config.ts` file needs to have `transpilePackages: ["@repo/ui"]` to ensure the UI components are properly built and available for use.
+
+Although not required, adding:
+
+```
+"paths": {
+	"@repo/ui/*": ["../../packages/ui/src/*"]
+}
+```
+
+in the `tsconfig.json` file of **each app** can help with TypeScript path resolution during development.
+
+### More Information
+
+#### [shadcn/ui](https://ui.shadcn.com/docs/monorepo) for UI components
+
+To use the CLI, run `npx shadcn@latest add <component-name>` in the `@repo/ui` package directory.
+
+It can also be run at each app directory and the CLI will automatically install `@radix-ui/react-slot` add the components to the shared `@repo/ui` package. Each app will need its own `components.json` file and the `paths` in the `tsconfig.json` file should be updated accordingly.
+
+#### [Tailwind CSS v4](https://tailwindcss.com/) for styling and to use shadcn/ui
+
+Each app needs its own `tailwind.config.js`file and `postcss.config.js` file but they all extend from the shared `@repo/ui/tailwind.config.js` and `@repo/ui/postcss.config.js` files.