From 17d1bf065e9b48d054c9205b04943ed11590407c Mon Sep 17 00:00:00 2001
From: afiqzudinhadi <afiqzudinhadi@gmail.com>
Date: Thu, 26 Jun 2025 11:39:52 +0800
Subject: [PATCH] docs: add usage

---
 apps/next-template/src/app/page.tsx |  4 ++--
 packages/ui/README.md               | 12 ++++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/next-template/src/app/page.tsx b/apps/next-template/src/app/page.tsx
index a4d4255..c4fa880 100644
--- a/apps/next-template/src/app/page.tsx
+++ b/apps/next-template/src/app/page.tsx
@@ -1,6 +1,6 @@
 import { log } from "@repo/logger";
-import { Link } from "@repo/ui/link/index.js";
-import { CounterButton } from "@repo/ui/counter-button/index.js";
+import { Link } from "@repo/ui/link";
+import { CounterButton } from "@repo/ui/counter-button";
 
 export const metadata = {
 	title: "Store | Kitchen Sink",
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 6b29b62..7b6280d 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -31,6 +31,18 @@ Although not required, adding:
 
 in the `tsconfig.json` file of **each app** can help with TypeScript path resolution during development.
 
+### Usage
+
+To use the UI components in your app, you can import them as follows:
+
+```tsx
+// React UI library components
+import { CounterButton } from "@repo/ui/counter-button";
+
+// shadcn/ui components
+import { Card } from "@repo/ui/components/card";
+```
+
 ### More Information
 
 #### [shadcn/ui](https://ui.shadcn.com/docs/monorepo) for UI components